javascript - AngularJS 在 ng-repeat 中选择单个表格单元格

Question

我希望能够单击 ng-repeat 中的表格单元格选择它(或使用 CSS 切换“开/关”)，但我很困惑，需要一些帮助。

HTML

<tr ng-repeat="row in game.rows">
    <td ng-repeat="word in row.words">{{word}}</td>
</tr>

td是由 API 为游戏的单词播种的。

Controller

'use strict';

angular.module('MyApp')
    .controller('CardCtrl', function($scope, $http) {
        $scope.game = {};

       $http.get('/api/games/new').success(function(game) {
           $scope.game = game;
        });
    });

我想做的是能够点击td类似于 toggleClass在 jQuery 中，能够在个人 td 上切换 CSS 类。有什么想法吗？

Answer 1

您可以通过以下方式轻松使用 ng-class 指令切换类:

<td ng-repeat="word in row.words" ng-class={yourClassName:toggle} ng-click="toggle = !toggle">{{word}}</td>

每次点击都会切换你的ClassName。将为每个 td 自动生成“toggle”属性(由于 Angular 和 ng-repeat 创建的范围)。因此不会影响其他td。