Question

我有列表菜单项，我想在点击时添加一个类，并为其他元素删除相同的类。如何第一次点击不起作用。但是再次单击同一项将添加该类（并删除现有项的类）。我在这做错了什么？

这是HTML

＆＃13;

<ul class="nav"> 
  <li><a class="active" ng-click="scrollTo($event,'glyphicons1')">Example</a></li> 
  <li><a class="" ng-click="scrollTo($event,'glyphicons2')">Alignment</a></li> 
  <li><a class="" ng-click="scrollTo($event,'glyphicons3')">Headers</a></li> 
  <li><a class="" ng-click="scrollTo($event,'glyphicons4')">Divider</a></li> 
  <li><a class="" ng-click="scrollTo($event,'glyphicons5')">Dinu items</a></li> 
</ul>

＆＃13;

这是脚本

＆＃13;

    $scope.scrollTo = function ($event, id) {
        if ($location.hash() !== id) {
            $scope.activeItem = id;
            $location.hash(id);
        } else {
            $anchorScroll();
        }
    };

＆＃13;

我要切换的课程是有效。

我有同样目的的指令，也有同样的行为。

自定义指令：

＆＃13;

myApp.directive('activate', function () {
    return {
        restrict: 'C',
        link: function (scope, element) {
            element.bind("click", function (e) {
                $("a").removeClass("active");
                element.addClass("active");
            });
        }
    };
});

＆＃13;

感谢您的帮助。

修改

我根据答案更改了 scrollTo（）功能（完美运行）。我需要做的更改是在调用 $ location.hash（）函数之前更改变量。

Answer 1

为什么在只使用内置ng-class指令的角色时会如此困难？

您可以使用类似

的内容

ng-class="{'active' : expression"}

详细了解ng-class here

Answer 2

正如adeel_s所提到的，请使用ng-class。

检查this plunkr

<强> HTML：

<ul class="nav"> 
  <li><a class="active" ng-class="{'active' : activeItem==='glyphicons1'}" ng-click="scrollTo($event,'glyphicons1')">Example</a></li> 
  <li><a class=""  ng-class="{'active' : activeItem==='glyphicons2'}"  ng-click="scrollTo($event,'glyphicons2')">Alignment</a></li> 
  <li><a class="" ng-class="{'active' : activeItem==='glyphicons3'}" ng-click="scrollTo($event,'glyphicons3')">Headers</a></li> 
  <li><a class="" ng-class="{'active' : activeItem==='glyphicons4'}" ng-click="scrollTo($event,'glyphicons4')">Divider</a></li> 
  <li><a class="" ng-class="{'active' : activeItem==='glyphicons5'}" ng-click="scrollTo($event,'glyphicons5')">Dinu items</a></li> 
</ul>

<强>脚本：

    $scope.activeItem='glyphicons1';
   $scope.scrollTo = function ($event, id) {
        $scope.activeItem=id;

    };

需要点击2次才能应用角度

2 个答案: