AngularJS以互斥的方式将类应用于多个按钮

Question

我是AngularJS的新手,有jQuery背景,仍然试图进入Angular思考.我有几个button喜欢:

<button class="btn active">btn1</button>
<button class="btn">btn2</button>
...
<button class="btn">btnN</button>

随着jQuery实现我的目标,那就是有active class只在一个button时刻,我会做

jQuery的

$(".btn").on('click', function(){
 $(this).siblings().removeClass('active')
        .end()
        .addClass('active');
});

CSS

.active{ ... }

但是我没有找到在Angular中做到这一点的一般方法.我找到了3个按钮的解决方案,但它很粗鲁,特别是如果route我的应用程序中有多个按钮.

特别是,现在我使用的解决方案是:

标记

<li class="start" ng:click="selected = 1" ng-class="{active: selected == 1}">
 <a href="#contenuti> </a>
</li>
<li class="start" ng:click="selected = 2" ng-class="{active: selected == 2}">
 <a href="#utenti> </a>
</li>
<li class="start" ng:click="selected = 3" ng-class="{active: selected == 3}">
 <a href="#messaggi> </a> 
</li>

在CONTROLLER中(用于引导程序设置)

switch($location.path()){
 case '/contenuti/plot': 
  $scope.selected = 1;
  break;
 case '/utenti': 
  $scope.selected = 2;
  break;
 case '/messaggi': 
  $scope.selected = 3;
  break;
}

这是一个我不喜欢的解决方案,我认为这不是一个非常好的解决方案.在此先感谢您的帮助.

jQuery解决方案小提琴:http://jsfiddle.net/HS4d6/

Answer 1

由于所有按钮似乎都非常相似，因此您可以使用 ng-repeat，如下所示：

<li data-ng-repeat="button in buttons" data-ng-class="{ active: button.url == location.path() }></li>

然后你的控制器将是这样的：

function myController($scope....){
    $scope.location = $location;

    $scope.buttons = [
        { url: '/contenuti/plot' },
        { url: '/utenti' },
        { url: '/messaggi' }
    ];
}

通过这种方式添加更多按钮并让它们自动工作会很容易。明确修改以满足您自己的需求。