使用 ng-repeat 更改在 angular 中单击的按钮的 css class

Question

这就是我想要做的：

我从 api 得到 json：✓
我使用 ng-repeat 将所有数据显示为一个按钮：✓
用户可以点击按钮：✓
如果该特定按钮的数据属性是 "premier"，则记录 "premier"，如果是 "random"，则记录随机：✓
如果这个按钮的数据属性是 "premier"，那么 class 应该是 "btn-danger disabled" : ✗

我在 laravel blade 文档中工作，所以我必须通过在前面放置 @ 来跳过 angular 的双大括号，如下所示：@{{ xxx }} .

目前的代码正确记录了数据正确的属性。但它改变了所有按钮的 class，而不仅仅是单击的按钮。

我的代码：

html:

<a href ng-click="validateClick(premier.correct, $index)"
           ng-class="{premier: isPremier, random: isRandom}"
           ng-repeat="premier in premiers"
           class="btn btn-default btn-game"
           data-correct="@{{premier.correct}}"
           href="#"
           role="button">
                @{{premier.name}}
</a>

app.js:

$scope.validateClick = function(row, index) {
    if (row == "premier") {
        $scope.isPremier = true;
        console.log($scope.isPremier + index)
    }
    else {
        $scope.isRandom = true;
        console.log($scope.isRandom + index)
    }
}

Answer 1

不是分配给公共范围变量，而是将其分配给首要对象并在 class

中使用它

HTML

<div ng-click="validateClick(premier, $index)" ng-class="{premier: premier.isPremier, random: premier.isRandom}" ng-repeat="premier in premiers" class="btn btn-default btn-game" data-correct="{{premier.correct}}" href="#" role="button">
                {{premier.name}}
</div>

控制器

$scope.validateClick = function (premier, index) {
        if (premier.correct == "premier") {
            premier.isPremier = true;
            console.log(premier.isPremier + index)
        } else {
            premier.isRandom = true;
            console.log(premier.isRandom + index)
        }
    }

jsFiddle 中提供了工作示例 http://jsfiddle.net/cce2g6y2/1/

使用 ng-repeat 更改在 angular 中单击的按钮的 css class

Change css class of button clicked in angular with ng-repeat

javascript

class

this

angularjs

angularjs-ng-repeat