0

假设我认为我有 4 个div标签：

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>

假设当用户选择点击其中一个时，我希望其余的变为红色。通常在肮脏的jQuery风格中，我会使用类似的东西：

var tiles = $('.tile');

tiles.click(function()
{
  tiles.css('background', 'red');
});

但是，我将如何在 AngularJS 的世界中做到这一点？我会将此代码粘贴在控制器中并使其相对于$scope？还是我会创建一个directive并将其绑定到每个图块元素？

4

1 回答 1

2

假设您的界面中不会只有 4 个随机图块未绑定到某种模型，您可以执行以下操作：

http://jsfiddle.net/V4YC9/1/

HTML

<div ng-app ng-controller="x">
    <div ng-repeat="tile in tiles" ng-click="selectTile(tile)" ng-class="tile.class">{{tile.name}}</div>
</div>

JavaScript

function x($scope) {
    $scope.selectedTileIndex = null;

    $scope.tiles = [
        {id: 1, name: 'tile 1'},
        {id: 2, name: 'tile 2'},
        {id: 3, name: 'tile 3'},
        {id: 4, name: 'tile 4'}
    ];

    // provide default class to all tiles
    angular.forEach($scope.tiles, function (tile) {
        tile.class = 'tile';
    });

    $scope.selectTile = function (clickedTile) {
        angular.forEach($scope.tiles, function (tile) {
            tile.class = 'tileNotSelected';
        });

        clickedTile.class = 'tileSelected';
    }
}

编辑：可能有 10 种不同的方法可以做到这一点。如果你不想混淆你的模型，你可以在 $scope 中存储一个单独的数组并通过说实时计算类ng-class="calculateTileClass(tile)"，类似于我在最初的回复中所做的：http: //jsfiddle.net/V4YC9/ 1/

于 2013-04-29T16:52:29.677 回答