ng-repeatなしで要素のリストをグループとしてバインドする方法を教えてください。

Question

私はAngularを学ぼうとしていましたが、小さなブロッカーを打ちました。私のマークアップにはDIVのリストがあり、クリックすると新しいクラスに切り替わります。これは静的なオプションリストであり、ng-repeat指示文を避けたいと思います。

<div ng-app="sampleApp" ng-controller="MainCtrl"> 
    <div class="item" id="germany">Germany</div> 
    <div class="item" id="poland">Poland</div> 
    <div class="item" id="sweden">Sweden</div> 
    <div class="item" id="japan">Japan</div> 
    <button type="button" ng-click="selected = []">Reset</button> 
</div> 

私は選択肢の配列にバインドしたいと思います。クリックすると、アイテムのIDを配列に追加する必要があります。選択しなかった場合は削除する必要があります。選択配列内のアイテムのIDの存在は、それが「アクティブ」クラスを有するべきかどうかを定義する。

これは私がAngularで行ったことですが、これはDIVの静的リストを使用することはできませんが、ng-repeatをJSONで使用することはできません。私はこれで周りにおしゃべりし、それが正しくselected配列にバインドされて得た。ボタンをクリックすると、バインディングが機能していることを示すアクティブクラスがリセットされます。

JSON + ng-repeatの方法を踏まずにこれを達成できますか？私にこれを指し示す例がいいだろう。

.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> 

Answer 1

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

および他のための同じパターンを繰り返してここ

はCSSだありがとう各国。コントローラで

：

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

ないあなたががNGリピートを避けたい理由を確認してください。これを使用すると、ビュー内で同じコードを何度も繰り返すことを避けることができ、バグを導入するリスクを減らすことができます。