Question

我有一个简单的菜单，我可以将“有效”类应用于点击的链接。

这是我菜单的一部分：

<ul>
<li>
   <a href="#/c/{{cId}}" ng-class='{"active":tog==1}' ng-click='tog=1'>{{c}}   
   </a>
</li>
<li>
   <a href="#/a/{{a.aId}}" class="tree-toggle" 
      ng-class='{"active":tog==2}' ng-click='tog=2'>{{a.Name}}
   </a>
</li>
</ul>

这是我之前说过的非常简单的结构，但是当我点击第一个li“c”时，设置了'active'类。然后当我点击第二个li元素时，类'active'也会在该元素上设置，而不会从第一个元素中删除，而只在第二个元素上设置。

有什么建议吗？

Answer 1

为我工作：

＆＃13;

.active{
   font-size: 14pt;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul ng-app>
<li><a href="#" ng-class='{"active":tog==1}' ng-click='tog=1'>Click-Me {{tog}}</a></li>
<li><a href="#" ng-class='{"active":tog==2}' ng-click='tog=2'>Click-Me {{tog}}</a></li>
</ul>

＆＃13;

Answer 2

这是一个解决方案：

希望它适合你......

＆＃13;

(function() {
  'use strict';

  angular.module('App', [])
    .controller('InputCtrl', ['$scope',
      function($scope) {
        $scope.cId = 1;
        $scope.c = 'some text';
        $scope.a = {};
        $scope.a.Name = 'some text in a';

 
      }
    ]);

}());

＆＃13;

.active{
  background-color:green;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="App" ng-controller="InputCtrl">
  <ul>
    <li>
      <a ng-href="" ng-class='{"active":tog==1}' ng-click='tog=1'>{{c}}   
   </a>
    </li>
    <li>
      <a href="" class="tree-toggle" ng-class='{"active":tog==2}' ng-click='tog=2'>{{a.Name}}
   </a>
    </li>
  </ul>
</div>

＆＃13;

当值更改时，AngularJs ng-class不会更新

2 个答案: