Angular ngModel 复选框

如果你在使用 Angular，那么你可能要使用复选框，以允许用户从多个选项中选择一个或多个选项。Angular 提供了一个非常简单的方式来处理复选框，使其易于使用和维护。

使用 ngModel 绑定绑定复选框

Angular 推荐使用 ngModel 指令来绑定表单元素。有两种不同的方式来绑定复选框：

方式一：使用 ngModel 绑定一个数组

你可以使用 ngModel 绑定一个数组来跟踪哪些复选框已经被选中了。例如：

<div *ngFor="let option of options">
  <label>
    <input type="checkbox" name="selectedOptions" [ngModel]="isSelected(option)" (ngModelChange)="toggleSelection($event, option)">
    {{option}}
  </label>
</div>

在这个例子中，我们使用 ngFor 循环一个 options 数组，为每个选项创建一个复选框。复选框的状态是使用 isSelected 方法和 ngModel 指令绑定的，该方法检查该选项是否包含在一个 selectedOptions 数组中。

使用 (ngModelChange) 事件处理程序来在选中或取消选中一个复选框时更新 selectedOptions 数组：

options = ['Option 1', 'Option 2', 'Option 3'];
selectedOptions = [];

isSelected(option) {
  return this.selectedOptions.indexOf(option) >= 0;
}

toggleSelection($event, option) {
  if ($event.target.checked) {
    this.selectedOptions.push(option);
  } else {
    const index = this.selectedOptions.indexOf(option);
    this.selectedOptions.splice(index, 1);
  }
}

在这个例子中，我们创建了一个名为 options 的数组，它包含三个选项。我们还创建了一个名为 selectedOptions 的数组，它将包含已选中的选项。isSelected 方法检查某个选项是否已经被选中，而 toggleSelection 方法会将选中的选项添加到 selectedOptions 数组中，或从中删除。

方式二：使用 [checked] 属性绑定

如果你只有一个简单的复选框，并且不需要跟踪多个选项之间的状态，那么你可以使用 [checked] 属性绑定。例如：

<label>
  <input type="checkbox" name="rememberMe" [checked]="rememberMe"> Remember me
</label>

在这个例子中，我们使用 [checked] 属性绑定来跟踪是否选中该复选框。我们可以在组件中使用一个名为 rememberMe 的布尔属性，来保存该复选框的状态：

rememberMe = false;

总结

Angular 提供了一个简单的方式来处理复选框，使其易于使用和维护。你可以使用 ngModel 指令来绑定表单元素，并使用 isSelected 方法和 toggleSelection 方法来跟踪哪些复选框已经被选中了。或者，如果你只需要一个简单的复选框，你可以使用 [checked] 属性绑定来跟踪它是否被选中。