Thursday, July 2, 2015

AngularJS limitTo Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The limitTo filter is used to control the number of items that are displayed in an ng-repeat directive. The model array/collection which feeds can have any number of items, but the limitTo filter can control the number of items displayed in the view.

The following is the syntax for using limitTo filter
<li ng-repeat="<array/collection> | limitTo:<number of items to limit>">

The following is an example of using limitTo filter.

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
</head>
<body>
          <div ng-init="Employees=[
                                       {id:1,Name:'Tom'},
                                      {id:2,Name:'Harry'},
                                      {id:3,Name:'Peter'},
                                      {id:4,Name:'Thomas'},
                                      {id:5,Name:'Tiger'},
                                      {id:6,Name:'Topas'}]">
                    <ul>
                       <li ng-repeat="emp in Employees | limitTo:4">
                         {{ emp.id }} - {{ emp.Name }}<br/>
                       </li>
                   </ul>
          </div>
</body>
</html>

Output:



Notice that the Employees array has 6 elements, but only 4 elements are displayed in the view since we applied a limitTo: 4 filter in the ng-repeat directive.

Search Flipkart Products:
Flipkart.com

No comments: