如何制作一个项目列表，可以使用 Angular JS 单独切换

How to make a list of items individually toggleable with Angular JS?

本文关键字：可以使 Angular JS 单独切 列表 项目 何制作 一个      更新时间：2023-09-26

这是一个切换按钮列表的基本示例，基本上是通过在每个按钮中执行ng-click="selected = !selected"。这意味着通过按下一个按钮，selected将一次在所有按钮中更新，因为它是在$scope中设置的。

我想做两件事：a）切换每个按钮而不立即更新的优雅方法是什么，然后b）将当前selected的按钮保留在$scope的对象中？我希望这些按钮充当实时过滤器：点击其中一个按钮应该在仅包含selected过滤器的$scope对象中切换它。

我建议在控制器中设置一个 ng-click 函数来同时处理这两个。要单独切换按钮，请在selected中为每个按钮提供自己唯一的变量，就像我在下面所做的那样。要将按钮添加到选定按钮的对象，您需要设置一个控制器，其中包含一个使用 ng-click 调用的函数，您可以在该对象中添加或删除按钮。

<body ng-app>
  <ul>
    <li>
      <button data-active="{{ selected.a }}" ng-click="selected.a = !selected.a">Item 1 is {{ selected.a }}</button>
    </li>
    <li>
      <button data-active="{{ selected.b }}" ng-click="selected.b = !selected.b">Item 2 is {{ selected.b }}</button>
    </li>
    <li>
      <button data-active="{{ selected.c }}" ng-click="selected.c = !selected.c">Item 3 is {{ selected.c }}</button>
    </li>
  </ul>
</body>
相关文章：