ngClass не отображается должным образом

Question

Я загружаю список todos, каждый todo имеет поле флага, которое, если истинно, должно применяться ng-class. При загрузке данных на страницу ng-class применяется, если я использую ng-class="{'completed': todo.isCompleted=='true'}", но тогда он не работает, когда я играю с флажками.

С другой стороны, если я использую 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-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> 

Надежда, что помогает

Answer 2

Вы пытались изменить

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

в

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

Или один из тех

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