javascript - 如何在 AngularJS 中选中删除时隐藏文本和复选框？

Question

如何隐藏复选框并删除下图中的文本:

屏幕 1:

加载页面后，屏幕将如下所示:

屏幕 2:

当复选框被选中时，文本消失，但复选框保留在那里。

Javascript代码:

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

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}

FIDDLE LINK HERE

Answer 1

查看this fiddle

 <li ng-repeat="todo in todos" class="done-{{todo.done}}">
    <input type="checkbox" ng-model="todo.done">
    <span >{{todo.text}}</span>
  </li>

您必须将类移动到整个列表元素才能隐藏它，而不仅仅是文本