在我的AngularJS应用程序中,我想只显示ng-repeat
内100条记录列表的第一个和最后一个记录(逐行)。
我的用户界面
<ul ng-repeat="employees in employee | filter:customFilter">
<li>{{employees.emp_id}} </li>
<li>{{employees.emp_name}} </li>
我的脚本
var app = angular.module('app', []);
app.controller('Ctrl', function($scope,$rootScope) {
$scope.employee = [
{emp_id: 1,emp_name: 'Jes'},
{emp_id: 2,emp_name: 'Sandy'},
{emp_id: 3,emp_name: 'King'},
{emp_id: 4,emp_name: 'rks'},
{emp_id: 5,emp_name: 'alex'},
{emp_id: 6,emp_name: 'cathrin'}
];
});
在这里,我想要显示第一行和最后一行,如
1 | Jes
6 | Cathrin
我的工作PLNKR HERE,
我该如何解决这个问题?
先谢谢。
答案 0 :(得分:2)
将ng-if
与$first || $last
如果重复元素在迭代器中是第一个,则ngRepeat 指令从a中为每个项目实例化一次模板 采集。每个模板实例都有自己的范围,给定的范围 loop变量设置为当前集合项,并设置
$index
到项目索引或键。
$ first 返回true 如果重复元素在迭代器中是最后一个, $ last 将返回true。
<ul ng-repeat="employees in employee | filter:customFilter" ng-if="$first || $last">
<li>{{employees.emp_id}} </li>
<li>{{employees.emp_name}} </li>
</ul>
答案 1 :(得分:1)
您还可以使用$last
循环中提供的特殊变量$first
(或ng-repeat
)。
$last
的值为true。 $first
的工作原理与第一个元素相同:)
答案 2 :(得分:1)
$first
和$last
见行动:
var app = angular.module('app', []);
app.controller('Ctrl', function($scope,$rootScope) {
$scope.employee = [
{emp_id: 1,emp_name: 'Jes'},
{emp_id: 2,emp_name: 'Sandy'},
{emp_id: 3,emp_name: 'King'},
{emp_id: 4,emp_name: 'rks'},
{emp_id: 5,emp_name: 'alex'},
{emp_id: 6,emp_name: 'cathrin'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="Ctrl">
<ul ng-repeat="employees in employee | filter:customFilter" ng-if="$first || $last">
<li>{{employees.emp_id}} | {{employees.emp_name}} </li>
</ul>
</body>