I'm fairly new to angular. What I'd like to to is replace the class of a div when a button is clicked. Using "ng-class" changes the class of all the divs with that class on the page, where I'd like to just select one to replace.
This jsfiddle demonstrates what I'm trying to do. I'm attempting to use jQuery, but as you can see it's not working in this context. My guess is there is a more "angular-ish" way to do it. Any suggestions?
Here is the code in the 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;
}
Yes, you are trying to approach it in the rather non-AngularJS way. With AngularJS you need to focus on the model manipulation, decoratively describe UI and let AngularJS figure out the rest.
One way of approaching the problem would be something along those lines:
function MyCtrl($scope) {
$scope.selected = true;
$scope.click = function () {
$scope.selected = false;
};
}
and in HTML:
<div ng-controller="MyCtrl">
<div ng-class="{test1: selected}">
Text1
</div>
<div class="test1">
Text2
</div>
<button ng-click="click()">Click</button>
</div>
Working jsFiddle here: http://jsfiddle.net/CqHDn/ but this is really only one way of doing things. The key question here is this: what is so special about the first div (functionally speaking) that you want to flip classes of it? You should probably represent functional concepts in your model.
As far as jQuery goes: I would really suggest dropping it altogether while learning AngularJS. I'm not the only one: http://stackoverflow.com/a/15012542/1418796