當價值發生變化時，AngularJs ng-class不會更新

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> 

它的結構很簡單，因爲我之前說的，但是當我點擊第一禮「C」類「活躍」設置。然後當我點擊第二個li元素時，類「active」也被設置在該元素上，並且不會從第一個元素中移除，而只會在第二個元素上設置。

有什麼建議嗎？

Answer 1

對我的作品爲：

.active{ 
 
    font-size: 14pt; 
 
}

<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>

Answer 2

這裏有一個解決方案：

希望它爲你....

(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'; 
 

 
    
 
     } 
 
    ]); 
 

 
}());

.active{ 
 
    background-color:green; 
 
}

<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>