Question

我是AngularJs的新手。我有一个li标记列表，默认情况下，默认情况下第一个li标记处于活动状态。现在点击任何其他li标签我正在调用一个名为displayData的函数。另外，我需要让点击的li处于活动状态，并删除其他li元素上的活动类。如何在AngularJs中做到这一点？

<ul class="nav nav-pills nav-stacked">
  <li class="menu-item"><a href>Karnataka<span class="badge badge-warning pull-right">{{totalCount}}</span></a>
    <ul class="nav nav-pills nav-stacked sub-headers">
        <li class="sub-header active" ng-click="displayData('bangalore')"><a href>Bangalore<span class="badge badge-success pull-right">{{bCount}}</span></a></li>
        <li class="sub-header" ng-click="displayData('hubli')"><a href>Bangalore<span class="badge badge-success pull-right">{{hCount}}</span></a></li>
    </ul>
  </li>
  <li class="menu-item"><a href>Kerala<span class="badge badge-warning pull-right">{{keralaCount}}</span></a>
    <ul class="nav nav-pills nav-stacked sub-headers">
        <li class="sub-header" ng-click="displayData('cochin')"><a href>Cochin<span class="badge badge-success pull-right">{{cochinCount}}</span></a></li>
        <li class="sub-header" ng-click="displayData('tvn')"><a href>Trivendrum<span class="badge badge-success pull-right">{{tvnCount}}</span></a></li>
    </ul>
  </li>
  <li class="menu-item"><a href>Gujarat<span class="badge badge-warning pull-right">{{gujCount}}</span></a>
    <ul class="nav nav-pills nav-stacked sub-headers">
        <li class="sub-header" ng-click="displayData('baroda')"><a href>Baroda<span class="badge badge-success pull-right">{{barodaCount}}</span></a></li>
        <li class="sub-header" ng-click="displayData('ahemedabad')"><a href>Ahemadabad<span class="badge badge-success pull-right">{{ahmdCount}}</span></a></li>
    </ul>
  </li>
  <li class="menu-item"><a href="#">TamilNadu<span class="badge badge-warning pull-right">{{tamilnaduCount}}</span></a>
    <ul class="nav nav-pills nav-stacked sub-headers">
        <li class="sub-header" ng-click="displayData('chennai')"><a href>Chennai<span class="badge badge-success pull-right">{{chennaiCount}}</span></a></li>
        <li class="sub-header" ng-click="displayData('madurai')"><a href>Ahemadabad<span class="badge badge-success pull-right">{{maduraiCount}}</span></a></li>
    </ul>
  </li>
</ul>

Answer 1

首先，阅读ngClass docs。

现在的解决方案，示例代码如何实现它 -

HTML：

  <li ng-class="bangaloreclass" ng-click="displayData('bangalore')" ..../>
  <li ng-class="hubliclass" ng-click="displayData('hubli')" ......./>

控制器：

  $scope.bangaloreclass = 'active'; //by default bangalore data selected
  $scope.hubliclass = ''; // by default hubli data not selected

  $scope.displayData = function(city) {
      if (city == 'bangalore') {
          $scope.bangaloreclass = 'active';
          $scope.hubliclass = '';
      } else if (city == 'hubli') {
          $scope.bangaloreclass = '';
          $scope.hubliclass = 'active';
      }
  }

将此逻辑应用于所有li元素，我希望这会有效。

Answer 2

您可以这样做，在需要时添加 ng-class （条件如下所示）并在 ng-click 中使用功能。这样，

ng-class="{active: ($index == selected)}"

ng-click函数调用为（传递参数-提供被单击项的不同性）

ng-click="showActive($index)"

然后在JS中将函数编写为（我打算在控制器函数内的下面编写函数）

$scope.showActive = function(index){$scope.selected = index;}

您可以通过重置选定的来更改活动班级，可以通过

完成

 i.e. $scope.selected = -1

在AngularJs中单击时更改类

2 个答案: