高效處理多個HTML元素與AngularJS

比方說，我有一個4個div標籤在我看來：高效處理多個HTML元素與AngularJS

<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元素？

來源

2013-04-29 Ahmed Nuaman

這些div標記是靜態的或使用ng-repeat創建？ – 2013-04-29 16:46:23

爲什麼會這樣？他們將擁有相同的類，以便它們可以是靜態的或動態創建的;他們都會在同一個父標籤中。 – 2013-04-30 07:29:04

假設，你會不會只是有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-29 16:52:29 Langdon

啊，所以在這裏你已經把邏輯放在'$ scope'控制器和一個指令之間;爲什麼？如果我想要將相同的邏輯應用於相同的盒子模式，但在應用程序的不同部分中，該怎麼辦？指令會不會有更多意義？ – 2013-04-30 07:30:39

當然，如果您打算重用一組元素或某種範例，則將其置於指令中即可。我只是說明完成任務的「角度方式」。它應該很容易轉換爲一個指令，假設你有一些結構（一個數組）來包裝它。 – Langdon 2013-04-30 12:55:41

所以這裏的問題是，控制器綁定到父$'範圍'和瓷磚存在於;然而，作爲一個'指令'我必須將範圍應用到父元素而不是子瓦片？ – 2013-04-30 17:38:03

高效處理多個HTML元素與AngularJS

回答

相關問題