2016-11-15 70 views
0

我有一个嵌套的ngRepeat,当我点击某个div时,我必须在嵌套结构中的每个项目上应用一些css类。这是我到现在为止(简化代码版本) -嵌套ngRepeat中的ngClass

查看

<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个元素都会改变。

我认为问题在于我如何声明数组。任何指针?

回答

2

什么简单的解决办法:

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

的伟大工程。我过度复杂:) – user869375