ngClass 无法正确呈现

Question

我正在加载待办事项列表，每个待办事项都有一个标志字段，如果为真，ng-class 应该适用。将数据加载到页面时，如果我使用 ng-class="{'completed': todo.isCompleted=='true'}"，则会应用 ng-class，但当我使用复选框时，它就不起作用了。

另一方面，如果我改用 ng-class="{'completed': todo.isCompleted==true}"（true 上没有引号），它加载数据时不会在开头应用 ng-class，这意味着加载所有就好像它们是假的，但在使用复选框时它工作正常。

这让我很抓狂，不知道为什么。

<ul id="todo-list">
    <li ng-repeat="todo in todos" ng-class="{'completed': todo.isCompleted==true}" class="editing">
        <div class="view" >
            <input class="toggle" type="checkbox" ng-click="complete(todo)" 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>

控制器

$scope.complete = function(todo) {
    $scope.insertTodo(todo, UPDATE);
};

感谢任何帮助。

Answer 1

你试过改变吗

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

至

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

或者，其中之一

ng-class="todo.isCompleted ? 'completed' : ''"  
ng-class="{true: 'completed', false: ''}[todo.isCompleted]"

Answer 2

因此，看起来您的 服务器 正在 return 将 布尔值 值作为 字符串，这就是为什么您的绑定不起作用...

您可以更改服务器的 return 值（首选）或将 ng-true-value 和 ng-false-value 添加到您的复选框并保留使用字符串比较绑定 ng-class：

<ul id="todo-list">
    <li ng-repeat="todo in todos" ng-class="{'completed': todo.isCompleted=='true'}" class="editing">
        <div class="view" >
            <input class="toggle" type="checkbox" ng-click="complete(todo)" ng-model="todo.isCompleted" ng-checked="{{todo.isCompleted}}" ng-true-value="'true'"  ng-false-value="'false'">
            <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>

希望对您有所帮助

ngClass 无法正确呈现

ngClass not rendering properly

angularjs

ng-class