2016-11-15 71 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