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:

http://plnkr.co/edit/jOO8YdPiSJEaOcayEP1X?p=preview

你有没有尝试过像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的精简版。

要了解更多关于这个,我会参考你写在这个特定主题上的文档。

https://docs.angularjs.org/api/ng/function/angular.element