當類更改時，ng-class 更新 AngularJs 視圖中 ng-repeat 中的所有項目

Question

我試圖將 AngularJs 的ng-class僅應用於單擊的特定項目，但無論我將ng-class="class"放在哪里，每次更新類時，它都會應用於ng-repeat所有項目ng-repeat指令。

有趣：我會認為將它添加到data-target="#collapse_{{ $index }}只會更改具有相同 $index 的相應項目？:(

我究竟做錯了什么？

如何讓類更改僅適用於單擊的特定項目？ 我想創建一些用戶可以選擇和取消選擇行的東西。

這是一個非常相似的帖子，但我不知道如何根據我的需要實現它： Only add class to specific ng-repeat in AngularJS

他是我要更改的標題的基本 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>

這是我的 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

問題是你正在更新數組中所有元素的類，所以你可以做些什么來解決這個問題是放置一個 ng-click 事件來切換額外的屬性並指示是否選擇了當前對象

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

最后在控制器中的一個函數中，如果您願意，可以根據索引或其他屬性更改 selected 屬性

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