ngClass 在页面加载时应用 CSS 而忽略条件

Question

我正在加载一个 todos 列表，每个 todo 都有一个标志字段，如果 true 则 ng-class 应该适用。当将数据加载到页面时 ng-class 被应用而文本显示装饰，而它应该只在 isCompleted=true.

这个问题只在第一次加载时出现，因为之后我可以正确使用复选框并且 ng-class 在我玩它时工作得很好。

AngularJS

<ul id="todo-list">
        <li ng-repeat="todo in todos" ng-class="{completed: todo.isCompleted}" class="editing">
                <div class="view" >
                    <input class="toggle" type="checkbox" ng-change="" ng-model="todo.isCompleted" ng-checked="{{todo.isCompleted}}">
                    <label ng-hide="isEditing" ng-dblclick="isEditing = !isEditing">{{todo.title}}</label>
                    <button class="destroy" ng-click="remove(todo)"></button>
                </div>
                <input class="edit" ng-show="isEditing" ng-model="todo.title" ng-blur="isEditing = !isEditing;edit(todo);">
        </li>
</ul>

CSS

.completed {
    color: #a9a9a9;
    text-decoration: line-through;
}

在此先致谢，如有任何帮助，我们将不胜感激。

Answer 1

您忘记了“ ”

ng-class="{'completed': todo.isCompleted==true}"

ngClass 在页面加载时应用 CSS 而忽略条件

ngClass applying CSS while ignoring condition when page loads

angularjs

ng-class