Question

我有一个嵌套的ngRepeat，当我点击一些div时，我必须在嵌套结构中的每个项目上应用一些css类。这就是我现在所拥有的（简化版代码） -

查看

<div ng-repeat="item in vm.userItems">
    <div ng-repeat="child in item.children" ng-class="vm.childSelected($parent.$index,$index)" ng-click="vm.toggleChild($parent.$index,$index)">
        <div class="panel-body">
            {{:: child.name}}
        </div>
    </div>
</div>

控制器

vm.isChildSelected = [];

vm.toggleChild = function (parentId, id) {

    vm.isChildSelected[parentId, id] = (vm.isChildSelected[parentId, id] == "" || vm.isChildSelected[parentId, id] == undefined) ? "goal-added" : "";

    //classes change for every nth element in each column - NOT WHAT I WANT
    console.info(vm.isChildSelected[0, 0] + "," + vm.isChildSelected[1, 0] + "," + vm.isChildSelected[2, 0] + "," + vm.isChildSelected[3, 0] + "," + vm.isChildSelected[4, 0]);   

    //Setting of class/passing argument is just fine 
    console.info(parentId + "," + id + ":" + vm.isChildSelected[parentId, id]);    //works just fine
};

vm.childSelected = function (parentId, id) {
    return vm.isChildSelected[parentId, id];
};

我遇到的问题是在控制台上，当我在点击时在div上设置类时，我看到所有内容都已正确记录，但是当评估ng-class表达式时，每列中每个第n个元素的类都会更改。

我认为问题在于我如何声明数组。有什么指针吗？

Answer 1

简单的解决方案：

<div ng-repeat="item in vm.userItems">
    <div ng-repeat="child in item.children" ng-class="{'goal-added':flag}" ng-click="flag=!flag">
        <div class="panel-body">
            {{:: child.name}}
        </div>
    </div>
</div>

在嵌套的ngRepeat中切换ngClass

1 个答案: