Using limitTo filter
limitTo:<numRows>
<tr ng-repeat="employee in employees | limitTo:3">
Show only top 3 rows
limitTo:<numRows>,<startIndex>
<tr ng-repeat="employee in employees | limitTo:2,2">
Show 2 rows from 3rd row (Index = 2)
EXAMPLE
JS
var app = angular.module('module1', []);
app.controller("myController", function ($scope) {
var employees = [
{ name : "Shaan", dob : new Date("May 12, 1980"),
gender : "Male", salary : 25000 },
{ name : "Renu", dob : new Date("October 08, 1985"),
gender : "Female", salary : 47000 },
{ name : "Rahul", dob : new Date("January 27, 1988"),
gender : "Male", salary : 35000 },
{ name : "Anju", dob : new Date("August 15, 1947"),
gender : "Female", salary : 18000 }
]
$scope.employees = employees;
$scope.rowLimit = 2;
});
HTML
<body ng-app="module1">
<div ng-controller="myController">
Rows to display :
<input type="number" step="1" min="0" max="4" ng-model="rowLimit" />
<table>
<thead>
<tr> <th>Name</th> <th>DOB</th> <th>Gender</th> <th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | limitTo:rowLimit">
<td> {{ employee.name }} </td>
<td> {{ employee.dob }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary }} </td>
</tr>
</tbody>
</table>
</div>
It will display number of rows from the employee data according to selected number.
No comments:
Post a Comment
Note: only a member of this blog may post a comment.