Question

我想从li中删除活动类，并将其添加到另一个li。我知道如何使用 jQuery 进行操作，但我不知道如何使用 AngularJS 。

这是我的代码：

$(document).ready(function() {

    // event to nav bar header
    $("ul.nav li").click(function() { 

        $("ul.nav li").removeClass("active");
        $(this).addClass("active");
    });
});

Demo Here

Answer 1

您可以在范围中构建 nav 项目的数组，并调用一个函数，如果相应的话，将变量设置为true字符串匹配。

此外，我建议根据此数组，使用ng-repeat构建 nav 。

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
  
    var navArr = [
        'home',
        'help',
        'admin'
    ];
    
    $scope.setNavActive = function(str) {
      console.log(str);
        angular.forEach(navArr, function(item) {
          console.log(item);
          $scope[item] = (str == item);
        });
    };
    
    $scope.home = true;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #6da54d;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <ul class="nav nav-pills pull-right mynavbar">
    <li ng-class="{active: home}" ng-click="setNavActive('home')"><a ng-href="#/">Home</a></li>
    <li ng-class="{active: help}" ng-click="setNavActive('help')"><a ng-href="#/help">Help</a></li>
    <li ng-class="{active: admin}" ng-click="setNavActive('admin')"><a ng-href="#/administration">Administration</a></li>
  </ul>
</div>

Answer 2

我喜欢使用三元运算符

ng-class="(clickedBoolean) ? 'active' : ''"

只需将clickedBoolean更改为您的点击事件正在更改的内容，您的ng-class指令将相应地执行操作。

单击添加和删除angularJs中的类

2 个答案: