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

Posted 2023-03-06

【中文标题】AngularJS以互斥方式将类应用于多个按钮

【英文标题】：AngularJS apply class to multiple buttons in mutual exclusive way

【发布时间】：2014-01-06 19:21:29

【问题描述】：

我是 AngularJS 的新手，拥有 jQuery 背景，并且仍在尝试进入 Angular 思维。 我有几个buttons 喜欢：

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

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

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/

【问题讨论】：

AngularJS 是数据驱动的。 通常你应该忘记 DOM。

【参考方案1】：

欢迎来到 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

【讨论】：

什么可以是模型驱动的，你已经把它移到一个指令中，并做了类似你在 jquery 中做的事情，我认为这不是有角度的方式。更好的方法是使用@Mathew 建议或用户已经在做的事情

@Chandermani 按钮确实属于视图世界（DOM 世界）——你同意吗？我的解决方案只是一个支架，一个种子——它应该作为一种灵感。它可以很容易地修改为模型驱动：只需$watch 一个由= （或$observe @）传递的值。 OP 想要一个适用的解决方案：尤其是当我的应用程序中有多个路由时。你打算如何在多条路由上使用ng-repeat？

@Chandermani 还有一个问题：为什么使用 jQuery 选择器会比这更好——请提供一些上下文？

我认为这可能是一个有效的解决方案。我在想的是它是否真的值得；与目标相比，代码行数并不是那么“便宜”，我在想是否有一种方法不使用 jqlight DOM 操作，实际上不使用 on() 并改用 ng-。无论如何感谢所有的解释和一切！

@steo ng-click 的工作方式几乎相同——它只是将回调附加到click 事件。如果你想触发一个动作，你可以通过设置selected=expression（在html标记中——与ng-click完全相同）将表达式传递给指令，并在指令中返回： link : ..., scope : selected : "&"。我不认为有那么多代码行——而且 selecting 在恒定时间内工作，而你的 jQuery 解决方案需要 O(number of buttons) 和 ng-repeat 它在每个$digest-cycle 中重新运行，并且需要线性时间。

【参考方案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' 
    ];

以这种方式添加更多按钮并让它们自动工作很容易。清楚地修改以适合您自己的需要。