Question

在应用程序中有4个复选框。当我选择一个盒子时，所有人都被选中，当我取消任何一个盒子时，所有盒子都被取消。我希望顶部框控制下面的所有框，就像我选中顶部框作为选择然后所有应该选择。如果我取消选择顶部所有应该取消选择。以下一个应该是相互独立的。如果我选择所有向下框，那么主顶框也应该被选中。

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {FormsModule} from '@angular/forms'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
  <input type="checkbox" [(ngModel)]="theCheckbox"  data-md-icheck (change)="toggleVisibility($event)"/><br>
  <input type="checkbox"  [(ngModel)]="theCheckbox" /><br>
  <input type="checkbox" [(ngModel)]="theCheckbox" /><br>
  <input type="checkbox" [(ngModel)]="theCheckbox" /><br>
  Checkbox is <span *ngIf="marked">checked</span><span *ngIf="!marked">unchecked</span>

  <div>And <b>ngModel</b> also works, it's value is <b>{{theCheckbox}}</b></div>

  `,
  directives: []
})
export class App {
  marked = false;
  theCheckbox = false;
  constructor() {

  }

  toggleVisibility(){
    this.marked= e.target.checked;
  }
}

@NgModule({
  imports: [ BrowserModule , FormsModule],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 1

首先，你必须意识到你不能使用＆＃34; theCheckbox＆＃34;作为所有复选框的ngModel。为了简化您的应用，您应该从每个复选框的一个变量开始。 e.g：

export class App {
   marked = false;
   masterCheckbox = false;
   slaveCheckbox1 = false;
   slaveCheckbox2 = false;
   slaveCheckbox3 = false;

   constructor() { }

   ...

并在您的HTML中

  <input type="checkbox" [(ngModel)]="masterCheckbox"  data-md-icheck (change)="toggleVisibility($event)"/><br>
  <input type="checkbox" [(ngModel)]="slaveCheckbox1" /><br>
  <input type="checkbox" [(ngModel)]="slaveCheckbox2" /><br>
  <input type="checkbox" [(ngModel)]="slaveCheckbox3" /><br>

这将解决您的问题，无论您点击哪个框，都会更改所有框。

接下来，您必须通过单击主框来实现（de）选择所有从属框的方法。这里只是一个基本的例子：

在你的打字稿文件中：

private toggleEntireItemSelection(): void {
   this.slaveCheckbox1 = this.marked;
   this.slaveCheckbox2 = this.marked;
   this.slaveCheckbox3 = this.marked;
}

然后从

调用此方法

 toggleVisibility(e){
    this.marked= e.target.checked;
    this.toggleEntireItemSelection();
 }

我确定你自己找到了上一个问题的解决方案。 ; - ）

Angular 4 - ngModel用于选择和选择多个复选框

1 个答案: