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

Question

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

 <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 }

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

Answer 1

如果您在 Controller 中不使用 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>