Question

我是AngularJS的新手，拥有jQuery背景，并且仍在尝试进入 Angular thinking 。我有几个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

欢迎来到 Angular world - 它与jQuery有点不同。但你会喜欢它！

Angular有很多好东西，但其中的女王是directive！

这是一个非常通用的解决方案的架构，可以完全不用担心当前的范围。它基本上使用指令初始化函数来实现实例间通信。如果您在满足您的特定需求时遇到问题，请给我一个大喊。

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

Answer 2

由于您的所有按钮看起来非常相似，您可以像这样使用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' }
    ];
}

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

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

2 个答案: