0

ビューに4 つのdivタグがあるとします。

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

そして、ユーザーがそのうちの 1 つをクリックして選択すると、残りの部分を赤くしたいとしましょう。通常、汚い 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 に答える