Angular：当多个 div 具有相同的类时，更改单个 div 的类的最佳实践是什么？答案

【问题标题】：Angular: What is a best practice for changing a single div's class when multiple divs have the same class?Angular：当多个 div 具有相同的类时，更改单个 div 的类的最佳实践是什么？
【发布时间】：2013-03-05 23:38:11
【问题描述】：

我对 Angular 还很陌生。我想要的是在单击按钮时替换 div 的类。使用“ng-class”会更改页面上所有具有该类的 div 的类，我只想选择一个来替换。

这个jsfiddle 展示了我正在尝试做的事情。我正在尝试使用 jQuery，但正如您所见，它在这种情况下不起作用。我的猜测是有一种更“棱角分明”的方式来做到这一点。有什么建议吗？

这是jsfiddle中的代码：

<div ng-controller="MyCtrl">
<div class="test1">
    Text1
</div>
<div class="test1">
    Text2
</div>
<button ng-click="click($event)">Click</button>
</div>

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

   $scope.click = function (e) {
       var source = e.target || e.srcElement;
       var div = source.prev("div.test1:first");
       div.toggleClass('test1');
   };
}

.test1 {
  color: blue;
}

【问题讨论】：

ud喜欢选择一个...哪一个？
在这种情况下，我想选择它上面的第一个。但是，如果您单击小提琴中的按钮，它将将此错误记录到控制台：“TypeError: Object # has no method 'prev'。”我也不相信 jQuery 是最好的方法。
well angular 本身使用 jQuery 的精简版本，所以如果你想使用 .prev() 之类的东西，你可能还需要引入标准的 jQuery 库。
是的...我在路径上有 jQuery。据我所知，它应该配置为使用它。这就是为什么我不确定它为什么会抛出那个错误。
它抛出错误是因为source 是一个 DOM 元素。您需要将其包装在 jQuery 中才能调用类似 prev() 的 jQuery 方法：$(source).prev(...)

标签： jquery angularjs

【解决方案1】：

是的，您正试图以非 AngularJS 的方式来处理它。使用 AngularJS，您需要专注于模型操作，装饰性地描述 UI，让 AngularJS 解决剩下的问题。

解决问题的一种方法是沿着这些思路：

function MyCtrl($scope) {

    $scope.selected = true;

    $scope.click = function () {
      $scope.selected = false;  
    }; 
}

在 HTML 中：

<div ng-controller="MyCtrl">
    <div ng-class="{test1: selected}">
        Text1
    </div>
    <div class="test1">
        Text2
    </div>
    <button ng-click="click()">Click</button>
</div>

在这里工作 jsFiddle：http://jsfiddle.net/CqHDn/ 但这实际上只是一种做事方式。这里的关键问题是：第一个 div （从功能上讲）有什么特别之处，你想翻转它的类？您可能应该在模型中表示功能概念。

就 jQuery 而言：我真的建议在学习 AngularJS 时完全放弃它。我不是唯一一个：https://stackoverflow.com/a/15012542/1418796

【讨论】：

很好的答案，很好的参考。
谢谢，非常有帮助。我同意 jQuery ..感觉不对，但我正在尝试。我真正想要实现的简单功能是在单击相应按钮时展开/折叠屏幕上的特定 div。由于页面上重复了 div 的类，我想找到一种方法来更改被点击的类。我已经更新了我的 jsFiddle 以更密切地反映这一点。
@Geoff，这听起来像你想要的：angular-ui.github.com/bootstrap/#/collapse
Thnx @MarkRajcok，想在这里的评论中写下同样的内容:-)
感谢您的提示。我看过那个并同意这是我想做的。但是，在我了解它应该如何工作之前，我不想依赖库。听起来答案是改变我的想法。与其弄清楚如何操作页面上的元素，不如弄清楚如何以支持所需功能的方式将模型对象中的数据馈送到 UI 元素中。