Question

我对角度很新。我想要的是在单击按钮时替换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;
}

Answer 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

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

1 个答案: