【问题标题】:Display count checked checkbox with angular material使用角材料显示计数复选框
【发布时间】:2020-04-06 16:25:39
【问题描述】:

我正在尝试在使用 Angular Material 在 HTML 中选中复选框时显示计数。

当用户点击一个复选框时,这个复选框被选中,编号为 1,而不是勾号或叉号。如果用户再次单击,则显示数字 2。你知道我怎样才能做到这一点吗?我在 Google 上没有找到任何使用 Angular 材料的示例...

谢谢

【问题讨论】:

    标签: angular angular-material


    【解决方案1】:

    这实际上只是一个带有用户界面的数字输入。

    我将创建一个绑定到属性的隐藏数字输入。 “复选框”将显示数据绑定的属性值,并且还会在单击时增加值。

    <div class="checkbox" [class.checked]="value > 0" (click)="value = value + 1">
      <span *ngIf="value > 0">{{value}}</span>
      <span *ngIf="!value">&nbsp;</span>
    </div>
    <input type="number" hidden [(ngModel)]="value" />
    

    我会将其创建为带有事件发射器的独立组件,以便您可以轻松地将多个实例放置在同一个组件中,但其实现超出了本问题的范围。

    您可能还想阅读 Angular 表单 ControlValueAccessor,以便您可以将您的组件视为标准的反应式表单控件。

    演示:https://stackblitz.com/edit/angular-ufjjkd

    【讨论】:

      猜你喜欢
      • 2016-01-23
      • 1970-01-01
      • 2019-06-02
      • 2015-07-17
      • 1970-01-01
      • 2020-07-24
      • 2021-11-07
      • 1970-01-01
      • 2016-12-04
      相关资源
      最近更新 更多