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)"来实时计算课程，类似于我在初始响应中所做的：http://jsfiddle.net/V4YC9/1/

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

1 个答案: