javascript - AngularJS ng-click在ng-repeat中更改颜色

我有一些代码列出了数据库中表中的项目。点击功能在绿色和红色之间切换单元格

 <div class="row">
    <div class="logs-table col-xs-12">
        <table class="table table-bordered table-hover" style="width:100%">

            <tr>
                <th>Name</th>
                <th>Seed</th>
                <th>Division</th>
            </tr>

            <tr ng-repeat="team in Pool">
                <td ng-class="{'btn-danger': started, 'btn-success': !started}" ng-click="inc()">{{ team.chrTeamName }}</td>
                <td>{{ team.intSeed }}</td>
                <td>{{ team.chrDivision }}</td>
            </tr>

        </table>
    </div>
</div>

我的点击功能如下

 $scope.inc = function () { $scope.started = !$scope.started }

唯一的问题是，这正在更改第一列中的所有单元格。我以为我需要在点击函数中传递参数，但是我不确定是什么。

最佳答案

如果您不在控制器中使用started值，则实际上不需要定义函数。

您可以使用ng-init初始化一个数组，以跟踪每个团队的started值。

像这样：

        <tr ng-repeat="team in Pool" ng-init="started = []">
            <td ng-class="{'btn-danger': started[$index], 'btn-success': !started[$index]}" ng-click="started[$index] = !started[$index]">{{ team.chrTeamName }}</td>
            <td>{{ team.intSeed }}</td>
            <td>{{ team.chrDivision }}</td>
        </tr>

如果每个团队实例上都有一个started属性，则某种方式会更清洁：

        <tr ng-repeat="team in Pool">
            <td ng-class="{'btn-danger': team.started, 'btn-success': !team.started}" ng-click="team.started = !team.started">{{ team.chrTeamName }}</td>
            <td>{{ team.intSeed }}</td>
            <td>{{ team.chrDivision }}</td>
        </tr>

关于javascript - AngularJS ng-click在ng-repeat中更改颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29220080/