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

Posted 2023-03-06

【中文标题】当类更改时，ng-class 会在 AngularJs 视图中更新 ng-repeat 中的所有项目

【英文标题】：ng-class updates all items in ng-repeat in AngularJs view when class is changed

【发布时间】：2017-10-30 01:05:46

【问题描述】：

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

有趣：我原以为用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";
;

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

【参考方案1】：

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

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

最后在控制器中基于 index 或另一个 property 的函数（如果您愿意），更改选定的属性

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

【讨论】：

感谢您的洞察力。也是一个很好的解决方案。

【参考方案2】：

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

模板：

ng-class="product.class"

控制器：

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

【讨论】：

非常感谢！当你想到它时，这很合乎逻辑。你真的帮了我很多忙！ :D

不客气。一次只能有一个活动项目吗？如果是这样，您可能只需要存储活动项目的索引。如果是这样，我可以更新我的答案。