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

【问题标题】：How to hide the text and checkbox when checked to remove in AngularJS?在AngularJS中选中删除时如何隐藏文本和复选框？
【发布时间】：2015-05-20 16:40:18
【问题描述】：

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

屏幕 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

【问题讨论】：

您可能需要考虑使用 ng-hide 隐藏元素，而不是添加类并使用 CSS 样式隐藏元素。

标签： javascript html angularjs checkbox

【解决方案1】：

查看thisfiddle

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

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

【讨论】：

【解决方案2】：

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

也在复选框上

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

【讨论】：