在Angularjs中使用ng-class嵌套項目的類

Question

我正在以下列格式顯示菜單項。 data包含項目列表，每個項目都有一個子項目。我需要爲選中的subitem應用selected類，並且所有項目的所有其他子項目應爲deselected。如何在控制器內部執行此操作。我嘗試在html內添加ng-click事件，並在控制器內部切換類，但不會應用其他項目中的所有其他子項。下面顯示了html和控制器代碼以獲取更多詳細信息。

<ol ng-model="data"> 
    <li ng-repeat="item in data" collapsed="true"> 
    <div ng-click="toggle(this)"> 
     <a class="btn btn-success btn-xs" ng-if="item.children && item.children.length > 0">{{item.name}}</a> 
    </div> 
     <ol ng-model="item.children" ng-class="{hidden: collapsed}"> 
     <li ng-repeat="subItem in item.children" ng-model="subItem.name" collapsed="true" ng-click="handleClick(subItem)"> 
      <div ng-class="{'selected-li': subItem.value, 'deselected-li': false}"> 
        {{subItem.name}} 
      </div> 
     </li> 
     </ol> 
    </li> 
    </ol> 

在我的控制，我有代碼如下：

$scope.toggle = function (scope) { 
    scope.toggle(); 
}; 

$scope.handleClick=function(subitem){ 
    subitem.value = subitem.value ? !subitem.value: true; 
} 

的UI內部使用的data對象包含兒也。請讓我知道我出錯的地方。

Answer 1

HTML

<li ng-repeat="subItem in item.children" ng-model="subItem.name" collapsed="true" ng-click="handleClick($index, item.children)"> 
     <div ng-class="{'selected-li': subItem.value, 'deselected-li': false}"> 
       {{subItem.name}} 
     </div> 
</li> 

JS

$scope.handleClick = function(index, subItems) { 
    for(var i = 0; i < subItems.length; i++) { 
     if(i == index) { 
      subItems[i].value = true; 
     } else { 
      subItems[i].value = false; 
     } 
    } 
} 

我在這裏做什麼，子項和整個item.children數組的索引被髮送到NG -click handler方法，然後在for循環中，我正在更新該列表中所有子項的值。