Angularjs |如何在指令中更改单击元素的兄弟姐妹的类？答案

【问题标题】：Angularjs | how in directive change classes for siblings of clicked element?Angularjs |如何在指令中更改单击元素的兄弟姐妹的类？
【发布时间】：2026-02-01 20:00:02
【问题描述】：

我对 Angular 很陌生，如果我的问题看起来微不足道，我很抱歉

我的按钮很少，由 ng-repeat 创建。他们有一些引导类来使它们变得更好，但是如果按钮是“活动的”，则会获得额外的类 - 活动。问题是只有一个按钮可以处于活动状态，并且我在页面上有 2 个单独的按钮组（具有不同类名的容器）。它们应该工作相同，但单击一组上的按钮不应影响另一组中的按钮。

你能帮我写一个指令，它将点击事件绑定到按钮，并从组中的所有按钮中删除“活动”类，并将其添加到点击按钮吗？

编辑：这是jsfiddle中的代码https://jsfiddle.net/996o7nk1/1/

HTML：

<!doctype html>
<html ng-app="confApp">
<head>
    <title>Test</title>
    <style>
        .active {color: red;}
    </style>
</head>
<body>
    <div ng-controller="ProjectConfCtrl">
        <div class="tans">
            <button class="btn btn-default btn-cph" ng-repeat="tan in tans" ng-class="active: tan.active === true" data-tan-type-id="{{tan.id}}">{{tan.name}}</button>
        </div>
        <div class="langs">
            <button class="btn btn-default btn-cph" data-ng-repeat="lang in langs">{{ lang.name }}</button>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="custom.js"></script>
</body>
</html>

JavaScript：

var app = angular.module("confApp", []);
app.controller('ProjectConfCtrl', [
  '$scope', function($scope) {
    $scope.tans = [
        {
            id: 1,
            name: 'Auto',
            active: true
        }, {
            id: 2,
            name: 'Import',
            active: false
        }
    ];
    $scope.langs = [
        {
            id: 1,
            name: 'English',
            active: true
        }, {
            id: 2,
            name: 'Spanish',
            active: false
        }, {
            id: 3,
            name: 'German',
            active: false
        }
    ];
  }
]);

对于小提琴，我只是更改了标记（删除了 html 和 head 标签并将 ng-app 添加到 div（它在 html 中））但不知何故在小提琴中它会引发错误。

我也添加了类，但它也不起作用......

【问题讨论】：

即使它不能完全工作，如果你能向我们展示你到目前为止编写的代码将会很有用

标签： angularjs dom

【解决方案1】：

您可以将 ng-class 与模型中的变量一起使用，就像在这个小提琴中一样： https://jsfiddle.net/L5wm11s2/1/

请注意，我必须将变量放在控制器中，而不是范围中，并使用controller as 才能从视图中访问变量。那是因为 ng-repeat 为每个重复的元素创建了一个子作用域——原始作用域的副本，但与之分开。因此，如果我只是在 ng-click 中执行 selectedTan = tan，我最终会在子范围内设置变量。这意味着每个按钮都可能认为自己被选中，因为它有自己的 selectedTan 变量。

【讨论】：

是的，小提琴效果很好，会尝试使其适应我的代码。谢谢！
所以只有一个问题，如何使 ng-class 与 tan.active 一起工作？我有一些预定义的数据（我将使用资源从 api 获取它）所以我需要我的 HTML 查看那些现有配置（如果存在）
在ng-class 属性中，您应该放置一个对象，其中每个键都是类的名称。将评估该对象的每个属性的值，如果它是真实的，则 Angular 会将类添加到元素中；如果为 false，则 angular 将删除该类。所以如果按钮的激活状态依赖于tan.active，你只需要使用ng-class="{'red-btn':tan.active}"。但是你需要在控制器中添加一些额外的尾声，以保证一次只有一个按钮处于活动状态。
感谢@Gustavo-Bicalho，它可以正常工作。你的解释让我明白了一切