Angular.js：改變與NG-類的類和點擊功能

我有這樣的對象數組我控制器（self.years）Angular.js：改變與NG-類的類和點擊功能

var self = this; 

    self.years =[ 
     {"year":"2010"}, 
     {"year":"2011"}, 
     {"year":"2012"}, 
     {"year":"2013"}, 
     {"year":"2014"}, 
     {"year":"2015"} 
    ];

在我的標記，我使用作使用每個對象按鈕NG-重複：

  <div class="btn-container col-md-2" ng-repeat="year in ctrl.years"> 
      <button class='btn year-btn' year="{{$index}}" ng-click="ctrl.updateYear($index)">{{year.year}}</button> 
     </div>

如果我的控制器上我有一個yearSelected已經加上每個按鈕點擊功能更改yearSelected：

self.yearSelected = self.years[5]; 

self.updateYear = function(indexSelected) { 
    self.yearSelected = self.years[indexSelected]; 
};

...我如何給那個相應的按鈕選擇使用ng-class的「selected」類？

來源

2016-07-29 NewToJS

你可以做'納克級=「{選擇」{ '主動' $指數=== CURRENTINDEX}「你的按鈕：self.yearSelected === year.year}「' –

Pankaj的答案同樣適用，假設您在任何時候都沒有重複的數組值。否則，你會得到多個突出顯示的按鈕。如果你有重複的歲月，你需要跟蹤$ index，你應該可以做任何事情。 – Brant

self.updateYear = function(indexSelected) { 
    self.currentIndex = indexSelected; // add this 
    self.yearSelected = self.years[indexSelected]; 
};

在用戶界面上，添加納克級=：

來源

2016-07-29 15:25:18 Brant

self.yearSelected = self.years[0]; 

self.updateYear = function(year) { 
    self.yearSelected = year; 
}; 


<div class="btn-container col-md-2" ng-repeat="obj in ctrl.years"> 
    <button class='btn year-btn' ng-click="ctrl.updateYear(obj)">{{obj.year}}</button> 
</div> 

//use ng-class="{active: self.yearSelected === obj.year }"

來源

2016-07-29 15:38:34

Angular.js：改變與NG-類的類和點擊功能

回答

相關問題