Angular Добавление класса в элемент ng-repeat, который обновляется или добавляется только

Question

Привет. Я пытаюсь динамически добавить класс в элемент, который обновляется в представлении.

http://jsfiddle.net/9s1rfwa8/7/

<div ng-app>
<div ng-controller="TodoCtrl">
    <ul>
        <li ng-repeat="todo in todos" class="bigfont todo done-{{todo.done}}"> <span>{{todo.text}}</span>

        </li>
    </ul>
</div>

function TodoCtrl($scope) {
$scope.todos = [{
    text: 'learn angular',
    done: true
}, {
    text: 'build a demo angular appsdfsdfsf',
    done: false
}, {
    text: 'build an awesome angular app',
    done: false
}];

}

Как добавить класс к элементу ng-repeat, который только изменен, а не другим.

Я пытаюсь придать ему эффект изменения элементов.

Answer 1

Вы можете использовать пользовательский фильтр для этого, пользовательский фильтр будет выполняться всякий раз, когда есть изменение.

Например, вы можете изменять свойство done внутри вашего объекта todo каждый раз, когда пользователь нажимает на строку, и использовать значение todo.done для установки класса внутри вашего фильтра

HTML

<li ng-repeat="todo in todos | filter:handleChange"
    class="bigfont todo done-{{todo.done}} {{todo.class}}"
    ng-click="todo.done = !todo.done"> 
    <span>{{todo.text}}</span>{{todo.class}}
</li>

JS

$scope.handleChange = function(row){
    if(!row.done){
      row.class = '';
    }
    else{
      row.class = 'changed'
    }

    return true;
}

это должно дать вам общее представление о том, как подойти к вашей проблеме, рабочий образец можно найти в следующем плунжере.

Демо

Answer 2

Ng-repeat будет дублировать повторяющийся элемент. Если вы хотите применить класс только к одному из повторяющихся элементов, вам нужно добавить условие, например, $ index === 0 для класса ng.

ng-class={'first-item-class': $index === 0}

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