Angular.js如何更改单击元素css类，并删除所有其他人
我试图让我的两个元素切换，所以如果一个元素被点击，它将删除我的类的所有引用，并将其应用到它自己。 有任何想法吗？
<span id="1" ng-style="my-class" ng-click="tog=my-class"></span> <span id="2" ng-style="my-class" ng-click="tog=my-class"></span> 干杯!
创build一个名为selectedIndex的作用域属性，以及一个itemClicked函数：
function MyController ($scope) { $scope.collection = ["Item 1", "Item 2"]; $scope.selectedIndex = 0; // Whatever the default selected index is, use -1 for no selection $scope.itemClicked = function ($index) { $scope.selectedIndex = $index; }; }
然后我的模板看起来像这样：
<div> <span ng-repeat="item in collection" ng-class="{ 'selected-class-name': $index == selectedIndex }" ng-click="itemClicked($index)"> {{ item }} </span> </div>
仅供参考$ index是ng-repeat指令中的一个魔术variables。
您也可以在指令和模板中使用相同的示例。
这是一个工作plnkr：
你有没有尝试过像ng-class这样的条件： http : //jsfiddle.net/DotDotDot/zvLvg/ ？
<span id='1' ng-class='{"myclass":tog==1}' ng-click='tog=1'>span 1</span> <span id='2' ng-class='{"myclass":tog==2}' ng-click='tog=2'>span 2</span>
对我来说，似乎最好的解决scheme是使用指令; 控制器不需要知道视图正在更新。
使用Javascript：
var app = angular.module('app', ['directives']); angular.module('directives', []).directive('toggleClass', function () { var directiveDefinitionObject = { restrict: 'A', template: '<span ng-click="localFunction()" ng-class="selected" ng-transclude></span>', replace: true, scope: { model: '=' }, transclude: true, link: function (scope, element, attrs) { scope.localFunction = function () { scope.model.value = scope.$id; }; scope.$watch('model.value', function () { // Is this set to my scope? if (scope.model.value === scope.$id) { scope.selected = "active"; } else { // nope scope.selected = ''; } }); } }; return directiveDefinitionObject; });
HTML：
<div ng-app="app" ng-init="model = { value: 'dsf'}"> <span>Click a span... then click another</span> <br/> <br/> <span toggle-class model="model">span1</span> <br/><span toggle-class model="model">span2</span> <br/><span toggle-class model="model">span3</span>
CSS：
.active { color:red; }
我有一个小提琴演示。 这个想法是，当一个指令被点击时，一个函数被调用的指令，将variables设置为当前的作用域ID。 那么每个指令也会看到相同的值。 如果范围ID匹配，则使用ng-class将当前元素设置为活动状态。
使用指令的原因是你不再依赖控制器。 事实上，我根本没有控制器（我在名为“model”的视图中定义了一个variables）。 然后，您可以在项目的任何地方重复使用此指令，而不仅仅是在一个控制器上。
通常与Angular你会输出这些跨度使用ngRepeat指令和（就像你的情况）每个项目将有一个ID。 我知道在所有情况下都不是这样，但是从后端请求数据 – 数组中的对象往往具有唯一的标识符是很典型的。
您可以使用此ID来简化列表中项目的类别切换（请参阅下面的plunkr或代码）。
当$ index（在其他答案中描述）由于在Angular中sorting而被搞乱时，使用对象id也可以消除不希望的效果。
示例Plunkr： http ://plnkr.co/edit/na0gUec6cdMABK9L6drV
（如果person.id等于$ scope.activeClass，则基本上应用.active-selection类，这是我们在用户单击某个项目时设置的。
希望这可以帮助别人，我发现在ng类中的expression是非常有用的！
HTML
<ul> <li ng-repeat="person in people" data-ng-class="{'active-selection': person.id == activeClass}"> <a data-ng-click="selectPerson(person.id)"> {{person.name}} </a> </li> </ul>
JS
app.controller('MainCtrl', function($scope) { $scope.people = [{ id: "1", name: "John", }, { id: "2", name: "Lucy" }, { id: "3", name: "Mark" }, { id: "4", name: "Sam" }]; $scope.selectPerson = function(id) { $scope.activeClass = id; console.log(id); }; });
CSS：
.active-selection { background-color: #eee; }
我只更改/删除类：
function removeClass() { var element = angular.element('#nameInput'); element.removeClass('nameClass'); };
HTML
<span ng-class="{'item-text-wrap':viewMore}" ng-click="viewMore= !viewMore"></span>
不能直接回答hitautodestruct没有足够的声誉，但使用与Angular混合的Jquery函数并不常见。 Angular支持Jquery的精简版。
要了解更多关于这个，我会参考你写在这个特定主题上的文档。
