在 AngularJS 中，ng-repeat 是一个非常强大和重要的指令，它可以让开发者轻松地渲染列表和集合数据。同时，AngularJS 还提供了 filter 和 $index 属性，使得我们能够更灵活地操作这些数据。本文将详细介绍如何结合使用这些功能。
使用 ng-repeat 渲染列表数据
首先，我们来看一下如何使用 ng-repeat 来渲染列表数据。假设我们有一个数组，里面包含了几个对象：
------------- - - - ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ---------- ---- -- -- - ----- -------- ---- -- - --
我们可以使用 ng-repeat 将这些数据渲染出来：
---- --- ----------------- -- ---------- ----------- -- --- ---------- -------- -----
这里，ng-repeat 遍历了 $scope.people 数组，并为每个对象创建了一个 li 元素。
使用 filter 过滤数据
接下来，我们来看看如何使用 filter 过滤数据。假设我们想只显示年龄大于等于 30 岁的人，我们可以这样写：
---- --- ----------------- -- ------ - ------- - ---- ------ ----- ----------- -- --- ---------- -------- -----
这里，我们在 ng-repeat 中使用了 filter 指令来过滤数据。{ age: '>=30' } 表示只显示年龄大于等于 30 岁的人。
使用 $index 操作数组索引
最后，我们来看看如何使用 $index 操作数组索引。假设我们希望在列表中显示每个人的序号，我们可以这样写：
---- --- ----------------- -- ------ - ------- - ---- ------ ----- ------ - - --- -- ----------- -- --- ---------- -------- -----
这里，我们使用了 $index 变量来获取当前遍历的对象在数组中的索引。由于数组索引从 0 开始，因此我们需要 $index + 1 才能得到正确的序号。
总结
通过本文的介绍，我们学习了如何使用 ng-repeat、filter 和 $index 来操作和渲染列表数据。ng-repeat 让我们能够轻松地渲染数组数据，filter 允许我们根据条件筛选数据，$index 则允许我们操作数组索引。结合使用这些功能，我们可以更加灵活地处理和展示数据。
完整代码示例：
--------------------- ---
----------------------- ---------------- -
------------- - -
- ----- -------- ---- -- --
- ----- ------ ---- -- --
- ----- ---------- ---- -- --
- ----- -------- ---- -- -
--
------------ ----- ----- ------------- ------ ----- ---------------- ---------------- ---- ------ --- -------------- ------- ----- ------------------------- ---- --- ----------------- -- ------ - ------- - ---- ------ ----- ------ - - --- -- ----------- -- --- ---------- -------- ----- ------- -------------------------------------------------------------------------------- ------- -------
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31636