Question

我正在将一个离子2和角度2用于一个小项目。我希望用户只能从提供的复选框中选择一个复选框。每当选中一个复选框但我不确定函数应该执行什么时，我添加了动作监听器。

    <ion-item *ngFor="let category of categories; let i = index">
      <ion-label [innerHTML]="category.name"></ion-label>
      <ion-checkbox color="royal" checked="category.value" (click)="Selection(i,categories);"></ion-checkbox>
  </ion-item>

以下是JSON对象的示例

    categories = [
    {
      name: 'Car Keys',
      value: 'false'
  },
  {
      name: 'Phone',
      value: 'false'
  },
  {
      name: 'ID/Drivers License',
      value: 'false'
  },
  {   name: 'Wallet',
      value: 'false'
  },
  {   name: 'Other',
      value: 'false'
  }]

我将类别的索引传递给函数，但不确定要检查的是什么。任何帮助将不胜感激。

Answer 1

使用单选按钮最容易实现，但是如果你想使用复选框，这意味着你应该在选择一个复选框时禁用其他复选框。

您拥有的数组，将value属性更改为布尔值false，我们可以使用它。然后，当选中一个复选框时，它将调用您的Selection - 函数，该函数在选择一个复选框时将其他复选框的值设置为true，并将其选为false。当用户取消选中复选框时，所有复选框值都将再次为false。为此我们使用唯一的name属性，该属性被传递给函数，当我们迭代类别以查看哪个被检查时。所以你的功能：

Selection(name: string) {
   this.categories.forEach(x => {
       if(x.name !== name) {
           x.value = !x.value
       }
   })
}

在模板中添加禁用选项：

<ion-item *ngFor="let category of categories; let i = index">
  <ion-label>{{category.name}}</ion-label>
  <ion-checkbox [disabled]="categories[i].value" (click)="Selection(category.name);"></ion-checkbox>
</ion-item>

只选中一个复选框

1 个答案:

的 Plunker