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

Question

我是 AngularJS 的新手，具有 jQuery 背景，并且仍在尝试进入 Angular 思维。 我有几个 button，例如:

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

使用 jQuery 来实现我的目标，即一次只有一个 button 有 active class , 我会做

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 中(用于 Bootstrap 设置)

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

这是一个我不太喜欢的解决方案，我认为这不是一个很好的解决方案。 在此先感谢您的帮助。

jQuery 解决方案 Fiddle:http://jsfiddle.net/HS4d6/

Answer 1

欢迎来到Angular 世界——它与jQuery 有点不同。但你会爱上它的!

Angular 中有很多好东西，但其中最重要的是指令!

这是一个非常通用的解决方案脚手架，完全不用担心当前范围。它基本上使用指令初始化函数来进行实例间通信。如果您在将其扩展到您的特定需求时遇到问题，请告诉我。

app.directive('selectable', function(){

    var selected;

    var unselect = function(element) {
        element.removeClass('selected');
    }

    var select = function(element) {
        if (selected){
            unselect(selected);
        }
        selected = element;
        element.addClass('selected');
    }

    return {

        link : function(scope, element, attrs){

            element.on('click', function(){
                select(element);
            });

        }
    }
});

PLNKR