0

我正在使用 Angularjs 1.4.7 版本。我有一个<ul><li>..</li>....</ul>并且想将一个background-color属性应用于选定的li. 代码如下：

      <ul class="nav nav-pills nav-stacked">
        <li class="menu-item" ng-repeat="item in items" ng-model="selectedElement" ng-class="{selected: $index==selectedElement}">
          <a href="">{{item.key}} - {{item.value}}</a>
        </li>
      </ul>

在控制器内部，我已经映射了$scope.selectedElement = 0所以默认情况下第一个li元素获取.selected类属性。

但是当我单击li元素时，我需要应用.selected该类。我可以绑定一个ng-click传递函数并将$index设置selectedElement为索引的函数，但我们可以只使用ng-class指令来完成。请让我知道这是否可能以及我目前的方法哪里出错了。

4

1 回答 1

1

ng-model对 li 不起作用，$index也不可靠。

像这样试试

在作用域上创建方法

$scope.markSelected=function(item){
  item.isSelected = true;
  $scope.items.filter(function(x){ return x.key != item.key; }).map(function(x){  
   x.isSelected=false;
  })
}

然后把它放在视图中

<li class="menu-item" ng-repeat="item in items" ng-click="markSelected(item)" ng-class="{selected: item.isSelected }">

DEMO

于 2016-01-15T05:48:06.713 回答