Question

我正在做一个有角度的待办事项清单。在这种情况下，我尝试执行全选，然后取消选择所有复选框。

todo.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { TodoService } from '../../services/todo.service';

import { Todo } from 'src/app/models/Todo';

@Component({
  selector: 'app-todo-item',
  templateUrl: './todo-item.component.html',
  styleUrls: \['./todo-item.component.css'\]
})
export class TodoItemComponent implements OnInit {
  @Input() todo: Todo;
  @Output() deleteTodo: EventEmitter<Todo> = new EventEmitter();

  constructor(private todoService:TodoService) { }

  ngOnInit() {
  }

  // Set Dynamic Classes
  setClasses() {
    let classes = {
      todo: true,
      'is-complete': this.todo.completed
    }

    return classes;
  }

  onToggle(todo) {
    // Toggle in UI
    todo.completed = !todo.completed;
    // Toggle on server
    this.todoService.toggleCompleted(todo).subscribe(todo => console.log(todo));
  }

  onDelete(todo) {
    this.deleteTodo.emit(todo);
  }
checkUncheckAll() {
  for (var i = 0; i < this.todos.length; i++) {
    this.checkUncheckAll\[i\].isSelected = this.todos;
  }
  this.checkUncheckAll();
}


}][1]][1]

todo.html

<div class="login-page">
    <form class="form" (ngSubmit)="onSubmit()" class="login-form">
        <input (change)="onToggle(todo)" type="checkbox" />
    {{ todo.title }}
    <button (click)="onDelete(todo)" class="del">x</button>
    </form>
</div>

上面是我的HTML代码。为此，我尝试插入“全选”和“取消全选”按钮。我尝试使用“选择所有复选框”功能。

Answer 1

// Todo.ts
export class Todo {
  id: number;
  title: string;
  completed: boolean;
  selected: boolean;
}   

// todo-item.component.html
<div [ngClass]="setClasses()">
  <p>
    <input (change)="onToggle(todo)" type="checkbox" [checked]="todo.selected"/>
    {{ todo.title }}
    <button (click)="onDelete(todo)" class="del">x</button>
  </p>
</div>     

// todos.component.html
<app-add-todo (addTodo)="addTodo($event)"></app-add-todo>
<div>
  <button type="submit" value="Submit" class="btn action-button" (click)="checkAll()">Select All</button>
  <button type="submit" value="Submit" class="btn action-button" (click)="uncheckAll()">Deselect All</button>
  <button type="Reset" value="Submit" class="btn action-button" (click)="resetAll()">Reset</button>
</div>
<app-todo-item *ngFor="let todo of todos" [todo]="todo" (deleteTodo)="deleteTodo($event)">
</app-todo-item> 

// todos.component.css
.action-button {
    margin-right: 10px;
}  

// todos.component.ts
export class TodosComponent implements OnInit {
  todos: Todo[];

  constructor(private todoService: TodoService) { }

  ngOnInit() {
    this.todoService.getTodos().subscribe(todos => {
      this.todos = todos;
    });
  }

  deleteTodo(todo: Todo) {
    // Remove From UI
    this.todos = this.todos.filter(t => t.id !== todo.id);
    // Remove from server
    this.todoService.deleteTodo(todo).subscribe();
  }

  addTodo(todo: Todo) {
    this.todoService.addTodo(todo).subscribe(todo => {
      this.todos.push(todo);
    });
  }

  checkAll() {
    for (let i = 0; i < this.todos.length; i++) {
      this.todos[i].selected = true;
    }
  }

  uncheckAll() {
    for (let i = 0; i < this.todos.length; i++) {
      this.todos[i].selected = false;
    }
  }
}

在这里，我为待办事项对象引入了一个新属性，称为 selected ，该属性绑定到输入的checked属性。

并且我向处理选择和取消选择动作的组件添加了两个名为checkAll和uncheckAll的方法，该方法需要绑定到SelectAll和UnselectAll按钮的click事件。

这些方法将遍历待办事项列表并根据所执行的操作更改所选属性的值，然后相应地选中和取消选中复选框。

如何在Angular中选择全部和取消选择复选框？

1 个答案: