[英]ng-class updates all items in ng-repeat in AngularJs view when class is changed
I am trying to apply AngularJs' ng-class
only to the specific item that is clicked, but no matter where I put the ng-class="class"
, each time the class gets updated, it is applied to all items in the ng-repeat
directive.我试图将 AngularJs 的
ng-class
仅应用于单击的特定项目,但无论我将ng-class="class"
放在哪里,每次更新类时,它都会应用于ng-repeat
所有项目ng-repeat
指令。
Interesting : I would have thought that adding it with data-target="#collapse_{{ $index }}
would only change the corresponding item with the same $index? :(有趣:我会认为将它添加到
data-target="#collapse_{{ $index }}
只会更改具有相同 $index 的相应项目?:(
What am I doing wrong?我究竟做错了什么?
How can I have the class change only apply to the specific item that was clicked?如何让类更改仅适用于单击的特定项目? I want to create something where a user can select and un-select a line.
我想创建一些用户可以选择和取消选择行的东西。
Here is a very similar post, but I am not sure how to implement this according to my needs: Only add class to specific ng-repeat in AngularJS这是一个非常相似的帖子,但我不知道如何根据我的需要实现它: Only add class to specific ng-repeat in AngularJS
He is my basic HTML for my header I want to change:他是我要更改的标题的基本 HTML:
<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:这是我的 CSS:
.active-product {
background: red;
color: green;
}
.inactive-product {
background: none;
color: none;
}
Here is my controller method (it is called by the addProduct
function):这是我的控制器方法(由
addProduct
函数调用):
$scope.class = "inactive-product";
function changeClass() {
if ($scope.class === "active-product")
$scope.class = "inactive-product";
else
$scope.class = "active-product";
};
This is an example how every item gets changed:这是每个项目如何更改的示例:
There is only one $scope.class
, so it makes sense that every element is using it.只有一个
$scope.class
,所以每个元素都在使用它是有道理的。 You may need one class
property on each product:您可能需要每个产品的一个
class
属性:
Template:模板:
ng-class="product.class"
Controller:控制器:
function changeClass(product) {
if (product.class === "active-product")
product.class = "inactive-product";
else
product.class = "active-product";
};
The problem is that you are updating the class of all the elements in the array, so what you could do to resolve this issue is put a ng-click event that toggle a extra property and indicates if the current object is selected问题是你正在更新数组中所有元素的类,所以你可以做些什么来解决这个问题是放置一个 ng-click 事件来切换额外的属性并指示是否选择了当前对象
<div ng-repeat='item in productList' >
<p ng-class='item.selected ? "active" : "default"' ng-click='toggleActive($index)'>item.id</p>
</div>
Finally in the controller one function that based on the index or another property if you prefer, change the selected attribute最后在控制器中的一个函数中,如果您愿意,可以根据索引或其他属性更改 selected 属性
$scope.toggleActive = function (){
//Makes only the clicked object have the selected attribute in true
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.