当 class 更改时，ng-class 更新 AngularJs 视图中 ng-repeat 中的所有项目

Question

我试图将 AngularJs' ng-class 仅应用于单击的特定项目，但无论我将 ng-class="class" 放在哪里，每次 class 得到更新后，它会应用于 ng-repeat 指令中的所有项目。

有意思：我还以为加上data-target="#collapse_{{ $index }}只会改变对应的item相同的$index？ :(

我做错了什么？

如何才能让 class 更改仅应用于被单击的特定项目？ 我想创建一些用户可以 select并取消 select 一行。

这是一个非常相似的post，但我不确定如何根据我的需要实现它：

他是我的基础HTML 我要改的header:

<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>

这是我的 CSS:

.active-product {
    background: red;
    color: green;
}

.inactive-product {
    background: none;
    color: none;
}

这是我的控制器方法（由addProduct函数调用）：

$scope.class = "inactive-product";

function changeClass() {
    if ($scope.class === "active-product")
        $scope.class = "inactive-product";
    else
        $scope.class = "active-product";
};

这是每个项目如何更改的示例：

Answer 1

只有一个$scope.class，所以每个元素都在使用它是有道理的。每个产品可能需要一个 class 属性：

模板：

ng-class="product.class"

控制器：

function changeClass(product) {
    if (product.class === "active-product")
        product.class = "inactive-product";
    else
        product.class = "active-product";
};

Answer 2

问题是您正在更新数组中所有元素的 class，因此您可以做的是放置一个 ng-click 事件来切换额外的属性并指示当前对象是否被选中

<div ng-repeat='item in productList' >
   <p ng-class='item.selected ? "active" : "default"' ng-click='toggleActive($index)'>item.id</p>
</div>

最后在控制器中一个基于 index 或另一个属性的函数，如果你愿意，改变选择属性

$scope.toggleActive = function (){
 //Makes only the clicked object have      the selected attribute in true
}

当 class 更改时，ng-class 更新 AngularJs 视图中 ng-repeat 中的所有项目

ng-class updates all items in ng-repeat in AngularJs view when class is changed

javascript

css

angularjs

ng-class