AngularJS применять класс по изменению нг-повтор с пагинацией

Question

Я пытаюсь применить класс к элементу в постраничном списке, для этого я просто имитировать щелчок на элементе в свойстве директивы ссылки:

link : function (scope, element, attrs) { 
     element.bind('click', function() { 
     element.addClass("blue"); 
      }); 

} 

Это хорошо работает, но проблема заключается в том, что когда я перемещаюсь, например, с первой страницы на вторую, я теряю классы, которые я применял к элементам первой страницы. Как я могу сохранить все те элементы с классом, который я применял раньше.

Thank you.

A plunker to better understand

Answer 1

Вы могли бы попытаться связать класс свойству элемента, используя нг -class и установите свойство item через ng-click, вместо использования директивы.

<input type="text" 
    ng-init="oldValueName = item.name" 
    ng-change="change($index,item.name,oldValueName,item.id,'name')" 
    ng-model="item.name" 

    ng-class="{'blue': item.nameClicked}" 
    ng-click="item.nameClicked = true" 
/> 

Если ваши данные постоянны, классы будут применяться автоматически при перемещении по страницам.

Для получения дополнительной информации о нг-класса и нг-нажмите

https://docs.angularjs.org/api/ng/directive/ngClass

и

https://docs.angularjs.org/api/ng/directive/ngClick

Answer 2

Вы должны хранить изменения в данных, а не элемента в директиве.

$scope.items = [ 
    {id: 51,name: 'Hello',surname: 'other454r', highlight: false}, 
    {id: 52,name: 'Foobar',surname: 'othe44rr' highlight: false}, 
    {id: 53,name: 'Barfoo',surname: 'othe52rr' highlight: false}, 
    {id: 54,name: 'Magic',surname: 'other1r' highlight: false}, 
    {id: 55,name: 'Wand',surname: 'other4r' highlight: false} 
]; 

Затем в повторе вы можете использовать угловые ng-click и ng-class директивы, которые будут выглядеть следующим образом:

<span ng-repeat="item in items" 
    ng-click="item.highlight=!item.highlight" 
    ng-class="{'blue': item.highlight}"> 
    {{item.name + ' ' + item.surname}} 
</span>