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

Question

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

6

我是一个刚接触AngularJS的初学者，具有jQuery背景，并且仍在努力理解“Angular思维”。我有几个类似以下的：

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

使用 jQuery 来达成我的目标，即每次只有一个按钮拥有 active 类，我会这样做：

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>

在控制器中（用于引导设置）

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/

- steo

AngularJS是数据驱动的。通常情况下，您应该忘记DOM。 - zs2020

2个回答

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' }
    ];
}

通过这种方式添加更多的按钮并让它们自动工作将非常容易。请根据自己的需求进行修改。

- Mathew Berg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- artur grzesiak · Accepted Answer

欢迎来到Angular世界--它与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