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

如果您未在控制器中使用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>

Answer 2

是的，将参数传递给您的函数会有所帮助。目前，您有一个$scope级变量（$scope.started），用于选择您的css ng-class。您可能想要一个逐队的财产。为此，您应该在ng-repeat中引用实际的team对象。

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

在你的javascript中：

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

现在您正在使用ng-repeat中的实际单个对象（team），一切都应该正常。

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

2 个答案: