Question

我正在使用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的{{1}}函数并将$index设置为索引，但是我们可以使用selectedElement指令来完成它。如果可能的话，请告诉我，以及我目前的方法出错的地方。

Answer 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

在Angularjs中突出显示所选li的最佳方式

1 个答案: