Question

我正在以下面的格式显示菜单项。 data包含项目列表，每个项目都有一个子项目。我需要为所选的selected应用subitem课程，所有项目的所有其他子项目应为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处理程序方法然后在for循环中我更新所有sub的值该列表中的项目。

使用ng-class为Angularjs中的嵌套项应用类

1 个答案: