Menu ▼


AngularJS expression Array example

In this article we will see how to use AngularJS expression with Array.

Example:
Array of integers : [10, 12, 36, 4, 51, 6, 8, 24];

  • To find array length we use the expression like {{ intary.length }}
    Array length={{ intary.length }}
  • To find array value based on index -> {{ intary[aryindex] }}
    Enter array index :
    Array value based on index : {{ intary[aryindex] }}
  • To sort the array in ascending order we use filter "orderBy" alogn with expression-> {{ intary | orderBy:'' }}
    Array in ascending order : {{ intary | orderBy:'' }}
  • To sort the array in descending order -> {{ intary | orderBy:'' :true }}
    Array in descending order : {{ intary | orderBy:'' :true }}

Source code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .exmpul span
        {
            padding: 5px;
            display: block;
            background: #ccc;
            margin: 10px 10px 20px 10px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="SampleApp" ng-controller="SampleCntrl">
        <strong>Array of integers : </strong>[10, 12, 36, 4, 51, 6, 8, 24];
        <br />
        <br />
        <ul class="exmpul">
            <li>To find array length we use the expression like <strong>{{ <em>intary.length</em>
                }}</strong>
                <br />
                <span>Array length={{ intary.length }}</span> </li>
            <li>To find array value based on index -> <strong>{{ <em>intary[aryindex]</em> }}</strong>
                <br />
                Enter array index :
                <input type="text" ng-model="aryindex" />
                <br />
                <span>Array value based on index : {{ intary[aryindex] }}</span> </li>
            <li>To sort the array in ascending order we use filter "orderBy" alogn with expression->
                <strong>{{ <em>intary | orderBy:''</em> }}</strong>
                <br />
                <span>Array in ascending order : {{ intary | orderBy:'' }}</span> </li>
            <li>To sort the array in descending order -> <strong>{{ <em>intary | orderBy:'' :true
            </em>}}</strong>
                <br />
                <span>Array in descending order : {{ intary | orderBy:'' :true }}</span> </li>
        </ul>
    </div>
    <script>
        var myapp = angular.module("SampleApp", []);
        myapp.controller("SampleCntrl", function ($scope) {
            $scope.intary = [10, 12, 36, 4, 51, 6, 8, 24];
            $scope.aryindex = 3;
            $scope.Math = window.Math;
        });
    </script>
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com