When applying AngularJs' ng-class, I encounter an issue where the class gets updated and applied to all items in the ng-repeat directive instead of just the specific item that was clicked. Even when using
data-target="#collapse_{{ $index }}I am puzzled about what I might be doing wrong. How can I make sure that the class change only affects the particular item that was clicked? My goal is to allow users to select and deselect a line.
This Stack Overflow post seems relevant, but I'm unsure how to adapt it to my requirements: Only add class to specific ng-repeat in AngularJS
This is the basic HTML for the header I need to modify:
<div class="panel-heading">
<div class="container-fluid panel-container item-container">
<div class="col-xs-1 text-left">
<h4>
<a data-toggle="collapse" data-target="#collapse_{{ $index }}">
<span class="glyphicon glyphicon-list"></span>
</a>
</h4>
</div>
<div class="col-xs-8 text-left product-header">
<a data-toggle="collapse" data-target="#collapse_{{ $index }}">
<span>Product Name: {{product.productName}}</span>
</a>
</div>
<div class="col-xs-3 text-right">
<span class="panel-title btn-group">
<button type="button" id="button-selected" class="btn btn-default btn-sm abc" ng-click="addProduct(product)" ng-class="class">
<span class="glyphicon glyphicon-plus text-primary"></span>
</button>
</span>
</div>
</div>
</div>
Here is my CSS:
.active-product {
background: red;
color: green;
}
.inactive-product {
background: none;
color: none;
}
This is my controller method (called by the addProduct function):
$scope.class = "inactive-product";
function changeClass() {
if ($scope.class === "active-product")
$scope.class = "inactive-product";
else
$scope.class = "active-product";
};
Here is an example showing how every item gets changed: https://i.sstatic.net/KAA5J.png