Question

这是一个切换按钮列表的basic example，基本上是通过在每个按钮中执行ng-click="selected = !selected"。这意味着只需按一个按钮，selected就会立即在所有按钮中更新，因为它是在$scope中设置的。

我想做的事情有两件事：a）在不更新所有内容的情况下切换每个按钮的优雅方式，然后b）将当前selected中的那些保留在$scope中的对象中{1}}？我希望这些按钮充当实时过滤器：点击其中一个按钮应该在仅包含$scope过滤器的selected对象中切换它。

Answer 1

我建议在控制器内部设置一个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>

如何使用Angular JS单独切换项目列表？

1 个答案: