2015-04-21 72 views
0

http://plnkr.co/edit/nEfBE33AJen3mz9YvjeC?p=preview如何切換以ng重複多份初始項目

我有一些數據,填充一個列表,我想第3項在該列表中,以獲得selected類。

我能夠給第一個項目,或任何單一的項目,類與下面的代碼,但我的問題是你將如何切換第一次加載多個項目?

enter image description here

.controller('PageCtrl', 
     ['$scope', 
     function($scope) { 

     var vs = $scope; 
     vs.message = "1st, 2nd and 3rd item should be selected by default:"; 
     vs.toggleTags = { item: 0 }; // This gives the first item the selected class 

     vs.myModel = [ 
     {name: 'aaa'}, 
     {name: 'bbb'}, 
     {name: 'ccc'}, 
     {name: 'ddd'}, 
     {name: 'eee'}, 
     {name: 'fff'}, 
     {name: 'ggg'} 
     ]; 
    }]); 

HTML:

<ul> 
    <li ng-repeat="m in myModel" data-ng-class="{'selected':toggleTags.item == $index}"> 
     <div class="tag">{{m.name}}</div> 
    </li> 
</ul> 

回答

3

我們之間,我不是通過非常尷尬IFS在視圖中保持隱藏狀態的粉絲。這不是一個地方。因此,這裏是一個修改,讓您可以選擇多個項目:

<ul> 
    <li ng-repeat="(k, m) in myModel" data-ng-class="{'selected':toggleTags.item.indexOf(k) > -1}"> 
     <div class="tag">{{m.name}}</div> 
    </li> 
</ul> 

toggleTags就變成了:

vs.toggleTags = { item: [0, 1, 2] }; 

清潔,那麼令人驚訝,更容易!

+0

不錯!乾淨的語法:)我看到這可以用來輕鬆加載自定義保存的選定設置。 –

1

我原本以爲這是我意外刪除的評論,所以我想我會繼續,並把它作爲一個答案,而不是重新評論,雖然塞巴斯蒂安的答案有更大的靈活性。這僅適用於第一X項目,而不是能夠挑選:

<ul> 
    <li ng-repeat="m in myModel" data-ng-class="{'selected':toggleTags.item >= $index}"> 
     <div class="tag">{{m.name}}</div> 
    </li> 
</ul>