2

我以以下格式显示菜单项。包含项目data列表，每个项目都有一个子项目。我需要为所有项目应用所选的selected类subitem和所有其他子项目deselected。如何在控制器内部执行此操作。我尝试通过ng-click在 html 中添加事件并在控制器中切换类，但它不适用于其他项目中的所有其他子项目。下面显示了 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; 
}

dataUI 中使用的对象也包含子对象。请让我知道我哪里出错了。

4

1 回答 1

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 循环中更新该列表中所有子项的值。

于 2016-04-07T05:12:22.183 回答