Question

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

我有几个按钮，我是通过ng-repeat创建的。他们有一些引导类使它们很好，但是如果按钮是＆＃34;活跃的＆＃34;获得额外的课程 - 活跃。问题是只有一个按钮可以处于活动状态，并且我在页面上有2个单独的组（具有不同类名的容器）按钮。它们应该相同，但单击一个组上的按钮不应该影响其他组中的按钮。

请你帮我写一个指令，它会将点击事件绑定到按钮并删除“活动”＆＃39;从组中的所有按钮分类，并将其添加到单击按钮？

EDITED：以下是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中））但不知何故，它会引发错误。

我也增加了课程，但它也不起作用......

Answer 1

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

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

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

1 个答案: