Question

我的控制器上有这个对象数组（self.years）

    var self = this;

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

在我的标记中，我使用ng-repeat为每个对象创建一个按钮：

         <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已经加上每个按钮的点击功能来改变那一年选择：

self.yearSelected = self.years[5];

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

...如何将相应的按钮提供给yearSelected a＆＃34; selected＆＃34;使用ng-class的课程？

Answer 1

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

在用户界面上，将ng-class =“{'active'：$ index === currentIndex}”添加到按钮

Answer 2

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 }"

Angular.js：使用ng-class和click函数更改类

2 个答案: