使用 ng-class 对 Angularjs 中的嵌套项目应用 class

Question

我正在以下面的格式显示菜单项。 data 包含项目列表，每个项目都有一个子项目。我需要为所选 subitem 应用 selected class，所有项目的所有其他子项目应为 deselected。如何在控制器内部执行此操作。我尝试通过在 html 内添加 ng-click 事件并在控制器内切换 class 但它不适用于其他项目内的所有其他子项目。 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 处理程序方法，然后在 for 循环中我更新所有的值该列表中的子项。

使用 ng-class 对 Angularjs 中的嵌套项目应用 class

applying class using ng-class for nested items in Angularjs

angularjs

angularjs-scope

angularjs-ng-click

angularjs-ng-class