Javascript 当类更改时，ng类在AngularJs视图中更新ng repeat中的所有项

我试图将AngularJs的

ng class

仅应用于单击的特定项，但无论我将

ng class=“class”

放在何处，每次更新该类时，它都会应用于

ng repeat

指令中的所有项

有趣的：我原以为将它与

数据目标=“#collapse_{{{$index}}

一起添加只会更改具有相同$index的对应项：（

我做错了什么

如何使类更改仅应用于单击的特定项？我想创建一些用户可以选择和取消选择行的内容

下面是一个非常类似的帖子，但我不确定如何根据我的需要实施：

他是我想要更改的标题的基本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>

这是我的控制器方法（由

addProduct

函数调用）：

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

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

$scope.class = "inactive-product";

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

---

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

只有一个

$scope.class

，因此每个元素都在使用它是有意义的。每个产品上可能需要一个

class

属性：

模板：

ng-class="product.class"

控制器：

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

---

问题是您正在更新数组中所有元素的类，因此您可以通过放置一个ng click事件来解决此问题，该事件将切换一个额外的属性，并指示是否选择了当前对象

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

---

非常感谢！当你想到这一点时，这是非常合乎逻辑的。你真的帮了我加载了！：d不客气。一次只能有一个活动项吗？如果是这样，你可能只需要存储活动项的索引。如果是这样，我可以更新我的答案。谢谢你的洞察力。这也是一个很好的解决方案。

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