javascript - 单击添加类的最 Angular 方式

Question

我正在构建一个带有大量开关的界面，以控制在应用程序搜索结果的不同部分过滤哪些数据。这是它的代码笔:Here

来自 jQuery/Backbone 背景，切换任何/所有过滤器项的“事件”状态的最 Angular 方式是什么？基本上，几乎所有 <li>此处显示的标签是可切换的功能。

在 jQuery 中，我会在 View 上放置一个监听器并等待任何点击事件冒泡并在 event.target 上切换“事件”类.我想用 Angular 以最好的方式做到这一点。

(此外，这是我的第一个 Angular 项目。我可能以错误的方式做各种事情。提前致歉。)

编辑:为了澄清问题，我有一个应用程序界面，其中包含 20 多个可能的过滤器属性，用于控制页面上的单独模块。每次有人切换这些过滤器属性之一时，我都想添加/删除一个“事件”类。我要放一个 'ng-click="function(...)"' 吗？在ng-repeat每个 Controller ？或者有没有更简单的方法来管理这个模块范围的行为(一个事件冒泡，就像在 Backbone/jQuery 中一样)？

谢谢!

Answer 1

你可以这样做:

<section ng-init="active = 'areaFoo'">
  <div ng-class="{active:active == 'areaFoo'}" ng-click="active = 'areaFoo'"></div>
  <div ng-class="{active:active == 'areaBar'}" ng-click="active = 'areaBar'"></div>
</section>

它将为您填充 $scope.active，并且非常有 Angular ，因为它利用现有指令，管理范围内的状态，并且不利用 dom api 或指令之外的事件。这里真的不需要controller，作为它的显示逻辑。

了解更多关于 ng-class here .

---

多个事件元素

<section>
  <div ng-class="{active:areaFoo}" ng-init="areaFoo = true">
     <button ng-click="areaFoo = true">activate</button>
     <button ng-click="areaFoo = false">de activate</button>
  </div>
  <div ng-class="{active:areaBar}" ng-init="areaBar = false">
     <button ng-click="areaBar = true">activate</button>
     <button ng-click="areaBar = false">de activate</button>
  </div>
  <div ng-class="{active:areaBar}" ng-init="areaBaz = false">
     <button ng-click="areaBaz = true">activate</button>
     <button ng-click="areaBaz = false">de activate</button>
  </div>
</section>

你也可以用这样的东西来切换 ng-click="areaFoo = !areaFoo"