如何在 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>

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

Answer 2

放class="done-{{todo.done}}"

也在复选框上

<input class="done-{{todo.done}}" type="checkbox" ng-model="todo.done">

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

How to hide the text and checkbox when checked to remove in AngularJS?

html

javascript

checkbox

angularjs