在“ng-repeat”中仅显示第一个和最后一个子项作为结果

Show only first and last child as result inside `ng-repeat`

本文关键字：最后一个 结果 第一个 ng-repeat 显示      更新时间：2023-09-26

在我的 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在这里，

我该如何解决这个问题？

提前谢谢。

将

ng-if与$first || $last一起使用

ngRepeat 指令从 收集。每个模板实例都有自己的范围，其中给定的 循环变量设置为当前集合项，并设置$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>

普伦克

小

菜一碟，有$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>

您也可以使用ng-repeat循环中可用的特殊变量$last（或$first）。

当当前元素是数组中的最后一个元素时，$last的值为 true。 $first的工作方式相同，但对于第一个元素:)

相关文章：