javascript - 使用 ng-repeat 更改按 Angular 单击的按钮的 css 类

Question

这就是我想做的:

• 我从 api 获取 json:✓
• 我使用 ng-repeat 将所有数据显示为按钮:✓
• 用户可以单击按钮:✓
• 如果该特定按钮的数据属性是“premier”，则记录“premier”，如果是“random”，则记录随机:✓
• 如果此按钮的数据属性为“premier”，则该类应为“btn-danger disabled”:✗

我正在处理 Laravel Blade 文档，因此我必须通过在前面放置 @ 来跳过 Angular 的双大括号，如下所示:@{{ xxx }}。

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

我的代码:

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

不要分配给公共(public)作用域变量，而是将其分配给首要对象并在类中使用它

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>

Controller

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