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

Question

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

我有几个按钮，我用 ng-repeat 创建的。他们有一些 bootstrap class 使它们变得漂亮，但如果按钮是 "active" 会获得额外的 class - 激活。问题是只有一个按钮可以激活，我在页面上有 2 个单独的按钮组（具有不同 class 名称的容器）。它们的工作原理应该相同，但单击一个组中的按钮不应影响其他组中的按钮。

你能不能帮我写一个指令，它将点击事件绑定到按钮，并从组中的所有按钮中删除 'active' class 并仅将其添加到点击按钮？

已编辑：这是js中的一段代码fiddle 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
        }
    ];
  }
]);

对于 fiddle 我只是更改了标记（删除了 html 和 head 标记并将 ng-app 添加到 div （它在 html 中））但不知何故fiddle 它抛出一个错误。

我也加了class，但是还是不行...

Answer 1

您可以将 ng-class 与模型中的变量一起使用，例如 fiddle： https://jsfiddle.net/L5wm11s2/1/

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

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

Angularjs | how in directive change classes for siblings of clicked element?

dom

angularjs

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

Angularjs | how in directive change classes for siblings of clicked element?

dom

angularjs

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