使用AngularJS有效地处理多个HTML元素

Question

假设我的视图中有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并将其绑定到每个tile元素？

Answer 1

假设你的界面中不只有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)"来ng-class="calculateTileClass(tile)"实时ng-class="calculateTileClass(tile)" ，类似于我在初始响应中所做的： http://jsfiddle.net/V4YC9/1/