How do you toggle an active state ng-class in an ng-repeat item using ng-click?
What i would do in your situation is define an object inside the parent scope of that ng-repeat, and assign the index or whatever you wish to a propperty of that object. That is because objects work by reference in javascript, which means that the ng-click will actually update the parent scope attribute instead of redefine it. Example at plnkr: http://plnkr.co/edit/oA12yLIb3RnlSYe6JxhI?p=preview
<!DOCTYPE html>
<html ng-app>
<head>
<style>
.active{
background-color: red;
height: 500px;
width: 500px;
}
</style>
</head>
<body ng-controller="HolaCtrl">
<ul>
<li data-ng-repeat="image in images" data-ng-click="toggleObject.item = $index">a
<img data-ng-class="{'active' : toggleObject.item == $index}" src="" /><br>
</li>
</ul>
<script>
function HolaCtrl($scope){
$scope.images = [1,2,3];
$scope.toggleObject = {item: -1};
}
</script>
</body>
</html>
Cheers
matenji
Updated on July 09, 2022Comments
-
matenji almost 2 years
<ul> <li data-ng-repeat="image in images" data-ng-click="toggle = !toggle" data-ng-init="toggle=false"> <img data-ng-class="{'active' : toggle}" src="" /> </li> </ul>
CSS for 'active' class is from bootstrap.
So toggling works, which is almost where I want it; I would like it similar to active states in navigation links, except in my example it's dealing with images so need to worry about url strings, etc.I tried emulating this example found here to no avail (I tried the same logic for images): ng-class to highlight active menu item based on ng-repeat. AngularJS
If someone could point me in the right direction, I would greatly appreciate it. :D
-
matenji almost 10 yearsYea, I stated the code is working perfectly. What's undesirable is the multi-selection. It should be that when one image is clicked the other image is deselected. Just like this topic dealing with active menu items: stackoverflow.com/questions/19943217/…
-
matenji almost 10 yearsTHANK YOU! I was doing something wrong with $index because I wasn't referencing that object. Thank you so much!! :) :)