angular 单选控件 radio的使用

最新推荐文章于 2021-08-24 12:38:25 发布

1322300062

最新推荐文章于 2021-08-24 12:38:25 发布

阅读量2.5k

点赞数

分类专栏： angular 文章标签： angular radio angular 单选按钮

angular 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何在Angular应用中添加单选控件，并通过一个具体示例演示了如何利用*ngFor循环遍历选项并创建单选按钮组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何添加单选控件？

在 Angular 中，我们通过 <input name="***" type="radio"> 方式添加单选控件。

import { Component } from '@angular/core'; @Component({
  selector: 'app-root',
  template: `
  <form #loginForm="ngForm">
    Angular版本：
    <div *ngFor="let version of versions;">
        <input 
          [attr.id]="version"
           name="version"
           ngModel
           required
           [value]="version"
            type="radio">
         <label [attr.for]="version">{{version}}</label>
      </div>
    <hr>
    {{loginForm.value | json}}
  </form>
  `,
}) export class AppComponent {
  versions = ['1.x', '2.x', '3.x'];
}