Question

这就是我想要做的事情：

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

我正在使用laravel刀片文档，因此我必须在前面放置@，跳过angular的双花括号，如下所示：@ {{xxx}}。

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

我的代码：

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

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

中使用它

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更改角度单击的css类按钮

1 个答案: