如何在不使用ng-repeat的情況下將一組元素作爲一個組進行綁定？

我一直在嘗試學習Angular，但遇到了一個小攔截器。我的標記有一個DIV列表，當點擊被切換時（一個新班級）。這是一個靜態的選項列表，我想避免ng-repeat指令。我想將它綁定到選擇數組。點擊後，該項目的ID應添加到數組中，未選中時應刪除。在選擇數組中存在項目的id定義它是否應該具有「活動」類。如何在不使用ng-repeat的情況下將一組元素作爲一個組進行綁定？

以下是我如何在Angular中完成它，但這意味着我不能使用我的靜態DIV列表，但是使用ng-repeat與JSON。我已經玩弄了這個，並正確地綁定到selected陣列。單擊該按鈕可以正確地重置顯示綁定工作的活動類。

我還可以在不使用JSON + ng-repeat方式的情況下完成此操作嗎？一個指向我的例子會很好。謝謝

這裏的CSS：

.item { 
    border-color: #ddd; 
    background-color: #fff; 
    color: #444; 
    position: relative; 
    z-index: 2; 
    display: block; 
    margin: -1px; 
    padding: 16px; 
    border-width: 1px; 
    border-style: solid; 
    font-size: 16px; 
} 

.item.active { 
    border-color: #ccc; 
    background-color: #d9d9d9; 
}

這裏的JS：

var SampleApp; 
(function (SampleApp) { 

    var app = angular.module('sampleApp', []); 
    app.controller('MainCtrl', function ($scope) { 
     $scope.selected = []; 

     $scope.clicked = function (member) { 
      var index = $scope.selected.indexOf(member.name); 
      if (index > -1) { 
       $scope.selected.splice(index, 1); 
       member.selected = false; 
      } else { 
       $scope.selected.push(member.name); 
       member.selected = true; 
      } 
      console.log($scope.selected); 
     } 
     $scope.items = [{ 
      name: "item1" 
     }, { 
      name: "item2" 
     }, { 
      name: "item3" 
     }, { 
      name: "item4" 
     }, { 
      name: "item5" 
     }]; 
    }); 

})(SampleApp || (SampleApp = {}));

這裏的標記：

<div ng-app="sampleApp" ng-controller="MainCtrl"> 
    <div class="item" ng-repeat="item in items" ng-click="clicked(item)" ng-class="{ active: selected.indexOf(item.name) !== -1 }" id="item.name">{{ item.name }}</div> 
    <button type="button" ng-click="selected = []">Reset</button> 
</div>

來源

2016-09-29 Mridang Agarwalla

<div class="item" id="germany" 
    ng-click="toggle('germany')" 
    ng-class="{ active: selected.indexOf('germany') >= 0 }">Germany</div>

，並重復同樣的模式在其他國家。

在控制器：

$scope.toggle = function(country) { 
    var index = $scope.selected.indexOf(country); 
    if (index >= 0) { 
     $scope.selected.splice(index, 1); 
    } else { 
     $scope.selected.push(country); 
    } 
};

不知道爲什麼你要避免NG重複雖然。使用它將避免在視圖中一次又一次地重複相同的代碼，從而降低引入錯誤的風險。

來源

2016-09-29 16:34:40

如何在不使用ng-repeat的情況下將一組元素作爲一個組進行綁定？

回答

相關問題