Question

嗨，我试图将类动态添加到在视图上更新的元素上。

<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

Ng-repeat将重复重复的元素。如果您只想将class应用于重复的元素之一，则需要添加一个条件，例如$ index === 0到ng-class。

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

这仅适用于第一个元素。使用任何一种条件逻辑来确定您要应用的条件逻辑。

Answer 2

您可以为此使用自定义过滤器，只要发生更改，就会执行自定义过滤器。

例如，您可以在用户每次单击该行并使用todo.done的值在过滤器内设置类时，更改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;
}

这应该为您提供有关如何解决问题的总体思路，您可以在下面的插件中找到一个有效的示例。

Demo

Angular将类添加到ng-repeat元素，仅更新或添加

2 个答案: