javascript - 在 `ng-repeat` 中只显示第一个和最后一个 child 作为结果

标签 javascript angularjs angularjs-ng-repeat

在我的 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 ,

我该如何解决这个问题?

提前致谢。

最佳答案

使用 ng-if$first || $最后

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

$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>

Plunker

关于javascript - 在 `ng-repeat` 中只显示第一个和最后一个 child 作为结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35284848/

相关文章:

javascript - 如何在单页应用程序中实现 gmail 撰写窗口概念?

javascript - 检测由shift键和其他键组合产生的特殊字符

javascript - 如何强制 ngRepeat 不通过引用进行比较?

javascript - Angularjs 中的菜单和子菜单

javascript - 具有多个元素的 Bootstrap 轮播

javascript - 在 JavaScript 中计算单词中的字母

javascript - Angular Accordion 范围的问题

javascript - 无法使用动态列表路由到 SPA Angular 中的其他页面

javascript - $sanitize 自定义白名单

javascript - AngularJS 将 ng-repeat 值传递给 ng-click