在使用 AngularJS 的 ng-repeat 指令渲染列表时，我们通常希望能够在用户点击列表项时为其添加一个 active 类，以使用户知道当前选中的是哪个元素。本文将介绍如何通过 AngularJS 实现这一功能的最佳实践。
第一步：定义一个控制器和一个变量
首先，我们需要定义一个控制器来处理列表的状态。在该控制器中，我们需要声明一个变量来存储当前被选中的项目的索引值。
---- -------------------------------
----
--- --------------- -- ------ ---------------------------- ----------- ------- ----------- --- ------ ---
-- ---- --
-----
-----
------
--------
--- --- - ----------------------- ----
-------------------------------- ---------------- -
------------ - ------ --- ----- --- ----- ----
------------------ - -----
---------------- - --------------- -
------------------ - ------
-
---
---------在上面的代码中，我们创建了一个名为 ListController 的控制器，并声明了一个名为 activeIndex 的变量，用于存储当前被选中项目的索引值（初始化为 null）。我们还定义了一个 setActive 函数，它会在用户点击列表项时被调用，并将 activeIndex 设置为当前项目的索引值。
注意，我们还在 ng-class 属性中使用了一个对象字面量来判断哪个元素应该拥有 active 类。如果 activeIndex 的值等于当前索引 $index，那么就添加 active 类。
第二步：使用 ng-class 和 ng-click 指令
接下来，在 HTML 中使用 ng-repeat 和 ng-click 指令来循环渲染列表，并在用户点击列表项时调用 setActive 函数。同时，我们需要在每个列表项上使用 ng-class 指令来添加或删除 active 类。
--- --------------- -- ------ ---------------------------- ----------- ------- ----------- --- ------ ---
如上所示，我们在 li 元素上使用了三个指令：ng-repeat、ng-click 和 ng-class。其中，ng-repeat 会循环渲染 items 数组中的所有元素；ng-click 会在用户点击列表项时调用 setActive 函数；而 ng-class 则根据条件表达式来添加或删除 active 类。
第三步：样式设计
最后，我们可以使用 CSS 来为 active 类设置特殊样式。例如：
--------- - ----------------- ----- -
这将使当前选中的列表项背景色变为淡灰色，以便于用户辨认。
结论
通过以上步骤，我们已经成功地实现了在 ng-repeat 中添加点击时的 active 类功能。总结一下，我们需要做的就是：
- 定义一个控制器来处理列表的状态，包括当前被选中项目的索引值。
- 在 HTML 中使用 ng-repeat 和 ng-click 指令循环渲染列表，并在用户点击列表项时调用 setActive 函数。
- 使用 ng-class 指令来添加或删除 active 类。
- 使用 CSS 来为 active 类设置特殊样式。
希望本文能够对你理解 AngularJS 的 ng-repeat 指令以及如何在其中添加点击时的 active 类功能有所帮助。如果你有任何疑问或建议，请在评论区留言，谢谢！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/26886