Angular.js How to change an elements css class on click and to remove all others
Solution 1:
Create a scope property called selectedIndex, and an itemClicked function:
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;
};
}
Then my template would look something like this:
<div>
<span ng-repeat="item in collection"
ng-class="{ 'selected-class-name': $index == selectedIndex }"
ng-click="itemClicked($index)"> {{ item }} </span>
</div>
Just for reference $index is a magic variable available within ng-repeat directives.
You can use this same sample within a directive and template as well.
Here is a working plnkr:
http://plnkr.co/edit/jOO8YdPiSJEaOcayEP1X?p=preview
Solution 2:
have you tried with a condition in ng-class like here : 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>
Solution 3:
To me it seems like the best solution is to use a directive; there's no need for the controller to know that the view is being updated.
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;
}
I have a fiddle that demonstrates. The idea is when a directive is clicked, a function is called on the directive that sets a variable to the current scope id. Then each directive also watches the same value. If the scope ID's match, then the current element is set to be active using ng-class.
The reason to use directives, is that you no longer are dependent on a controller. In fact I don't have a controller at all (I do define a variable in the view named "model"). You can then reuse this directive anywhere in your project, not just on one controller.