Question

我的页面上有两个复选框，我想将选中的复选框值分配给我的媒体资源。现在，我已经创建了复选框，但是当我将其绑定到相同的属性时，它们会在我不需要的视图中一起触发。我有alignment属性，该属性将获取left或right复选框的值。我该如何实现？

<div class="row clearfix">
 <ul class="list-group">
   <li class="list-group-item">
    Left 
    <div class="material-switch pull-right">
     <input id="someSwitchOptionDefault" name="someSwitchOption001" type="checkbox" [(ngModel)]="addProfile.alignment"/>
      <label for="someSwitchOptionDefault" class="label-default"></label>
      </div>
   </li>
 </ul>
</div>
<div class="row clearfix">
 <ul class="list-group">
  <li class="list-group-item">
   Right
   <div class="material-switch pull-right">
   <input id="switch" name="switch" type="checkbox" [(ngModel)]="addProfile.alignment"/>
   <label for="switch" class="label-default"></label>
   </div>
  </li>
 </ul>
</div>

Answer 1

您可以通过将每个复选框绑定到一个getter / setter属性来使两个复选框修改同一变量，该属性以不同的方式解释该变量。在下面的模板中，使用了两个不同的属性：

<div>
  <input type="checkbox" [(ngModel)]="isLeftAligned">Left
</div>
<div>
  <input type="checkbox" [(ngModel)]="isRightAligned">Right
</div>
<div>
  Alignment: {{strAlignment}}
</div>

但是，在代码中，isLeftAligned和isRightAligned都依赖于变量alignment：

enum Alignment {
  None,
  Left,
  Right,
}

export class AppComponent {

  private alignment = Alignment.None;

  get isLeftAligned(): boolean {
    return this.alignment === Alignment.Left;
  }
  set isLeftAligned(value: boolean) {
    if (value) {
      this.alignment = Alignment.Left;
    } else {
      this.alignment = Alignment.None;
    }
  }

  get isRightAligned(): boolean {
    return this.alignment === Alignment.Right;
  }
  set isRightAligned(value: boolean) {
    if (value) {
      this.alignment = Alignment.Right;
    } else {
      this.alignment = Alignment.None;
    }
  }

  ...    
}

有关演示，请参见this stackblitz。

一种替代方法是使用单选按钮而不是复选框。

将同一属性绑定到两个复选框

1 个答案: