使用 ng-repeat 更改无序列表 <ul> 中的值；还设置一个活动 <li>

Question

我一直在尝试研究如何生成一个列表，如果您单击列表中的一个对象，它就会变为活动状态。我已经设法让它轻松地在代码的非动态版本中工作。但是，在 AngularJS 动态版本上工作，我似乎无法让它工作。数据没问题，所以不可能是数据相关，一定是我的动态代码不行。

这是一段工作代码（但不是动态的）

                    <ul class="nav nav-pills" ng-init="catVal = 1">
                        <li ng-class="{active: catVal===1}">
                            <a href="" ng-click="catVal = 1">Category 1</a>
                        </li>
                        <li ng-class="{active: catVal===2}">
                            <a href="" ng-click="catVal = 2">Category 2</a>
                        </li>
                        <li ng-class="{active: catVal===3}">
                            <a href="" ng-click="catVal = 3">Category 3</a>
                        </li>
                    </ul>

现在我真正想要的是这个代码的 AngularJS 动态版本。这是我迄今为止尝试过但失败的方法。

                    <ul class="nav nav-pills">
                        <li ng-repeat="category in model" ng-init="catVal = 1" ng-class="active: catVal === category.catID ">
                            <a href="" ng-click="catVal = category.catID">{{category.catName}}</a>
                        </li>
                    </ul>

catID 与类别相关联，并且应该给出与上一个列表相同的结果。我把名字放在正确的地方，只是值不起作用。

Answer 1

试试这个。

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.rowIndex = -1;
  $scope.items = [{"name":"ali","score":2},{"name":"reza","score":4},{"name":"amir","score":5},{"name":"asd","score":10}];
 
  $scope.selectRow = function(index){
      if(index == $scope.rowIndex)
        $scope.rowIndex = -1;
        else
          $scope.rowIndex = index;
    }
  });

.active{
  background-color:#a11af0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">

    <ul class="nav nav-pills" ng-init="catVal = 1">
       <li ng-repeat="item in items" ng-class="{'active':rowIndex == $index }" ng-click="selectRow($index)">
           <a href="">{{item.name}}</a>
        </li>
                       
     </ul>        
</div>