Checkbox多选框

    • 在一组可选项中进行多项选择时；
    • 单独使用可以表示两种状态之间的切换，和 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    简单的 checkbox。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-checkbox-basic',
    5.   template: `
    6.     <label nz-checkbox [(ngModel)]="checked">Checkbox</label>
    7.   `
    8. })
    9. export class NzDemoCheckboxBasicComponent {
    10.   checked = true;
    11. }

    Checkbox多选框 - 图2

    受控的 Checkbox

    联动 checkbox。

    在实现全选效果时，你可能会用到 nzIndeterminate 属性。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-checkbox-check-all',
    5.   template: `
    6.     <div style="border-bottom: 1px solid rgb(233, 233, 233);">
    7.       <label
    8.         nz-checkbox
    9.         [(ngModel)]="allChecked"
    10.         (ngModelChange)="updateAllChecked()"
    11.         [nzIndeterminate]="indeterminate"
    12.       >
    13.         Check all
    14.       </label>
    15.     </div>
    16.     <br />
    17.   `
    18. })
    19. export class NzDemoCheckboxCheckAllComponent {
    20.   allChecked = false;
    21.   indeterminate = true;
    22.   checkOptionsOne = [
    23.     { label: 'Apple', value: 'Apple', checked: true },
    24.     { label: 'Pear', value: 'Pear', checked: false },
    25.     { label: 'Orange', value: 'Orange', checked: false }
    26.   ];
    28.   updateAllChecked(): void {
    29.     this.indeterminate = false;
    30.     if (this.allChecked) {
    32.         return {
    33.           ...item,
    34.           checked: true
    35.         };
    36.       });
    37.     } else {
    38.       this.checkOptionsOne = this.checkOptionsOne.map(item => {
    39.         return {
    40.           ...item,
    41.           checked: false
    42.         };
    43.       });
    44.     }
    45.   }
    47.   updateSingleChecked(): void {
    48.     if (this.checkOptionsOne.every(item => item.checked === false)) {
    49.       this.allChecked = false;
    50.       this.indeterminate = false;
    51.     } else if (this.checkOptionsOne.every(item => item.checked === true)) {
    52.       this.allChecked = true;
    53.       this.indeterminate = false;
    54.     } else {
    55.     }
    56.   }
    57. }

    Checkbox多选框 - 图4

    不可用

    checkbox 不可用。

    方便的从数组生成 Checkbox 组。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-checkbox-group',
    5.   template: `
    6.     <nz-checkbox-group [(ngModel)]="checkOptionsOne" (ngModelChange)="log(checkOptionsOne)"></nz-checkbox-group>
    7.     <br />
    8.     <br />
    9.     <nz-checkbox-group [(ngModel)]="checkOptionsTwo" (ngModelChange)="log(checkOptionsTwo)"></nz-checkbox-group>
    10.     <br />
    11.     <br />
    12.     <nz-checkbox-group [(ngModel)]="checkOptionsThree" (ngModelChange)="log(checkOptionsThree)"></nz-checkbox-group>
    13.   `
    14. })
    15. export class NzDemoCheckboxGroupComponent {
    16.   checkOptionsOne = [
    17.     { label: 'Apple', value: 'Apple', checked: true },
    18.     { label: 'Pear', value: 'Pear' },
    20.   ];
    21.   checkOptionsTwo = [
    22.     { label: 'Apple', value: 'Apple' },
    23.     { label: 'Pear', value: 'Pear', checked: true },
    24.     { label: 'Orange', value: 'Orange' }
    25.   ];
    26.   checkOptionsThree = [
    27.     { label: 'Apple', value: 'Apple', disabled: true, checked: true },
    28.     { label: 'Pear', value: 'Pear', disabled: true },
    29.     { label: 'Orange', value: 'Orange' }
    30.   ];
    32.   log(value: object[]): void {
    33.     console.log(value);
    34.   }
    35. }

    布局

    nz-checkbox-wrapper 内嵌 nz-checkbox 并与 Grid 组件一起使用，可以实现灵活的布局。

    通过ViewChild或其他方式获得 实例