Angular.js: изменить класс с помощью ng-class и функции щелчка

Question

Angular.js: изменить класс с помощью ng-class и функции щелчка

0

У меня есть этот массив объектов на моем контроллере (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 уже плюс функция щелчка для каждой кнопки, чтобы изменить этот yearSelected:

self.yearSelected = self.years[5];

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

... как я могу присвоить соответствующую кнопку в год. Выбран "выбранный" класс с использованием ng-класса?

NewToJS 29 июль 2016, в 17:26

Источник

0

Вы можете сделать ng-class="{selected: self.yearSelected === year.year }"
Pankaj Parkar 29 июль 2016, в 15:25
0

Ответ Панкаджа также работает, если у вас нет повторяющихся значений в массиве. В противном случае вы получите несколько выделенных кнопок. Если у вас есть повторяющиеся годы, вам нужно будет отслеживать по $ index, что вы, вероятно, должны делать в любом случае.
Brant 29 июль 2016, в 15:27

Теги:

javascript

angularjs

ng-class

2 ответа

0

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

Sandeep Kumar 29 июль 2016, в 14:30

Ещё вопросы

Вы можете сделать ng-class="{selected: self.yearSelected === year.year }"
Ответ Панкаджа также работает, если у вас нет повторяющихся значений в массиве. В противном случае вы получите несколько выделенных кнопок. Если у вас есть повторяющиеся годы, вам нужно будет отслеживать по $ index, что вы, вероятно, должны делать в любом случае.

Brant · Accepted Answer · 2016-07-29T13-35-00.000Z

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

В пользовательском интерфейсе добавьте к вашей кнопке ng-class= "{'active': $ index === currentIndex}"