时间戳

首页 > 解决方案 > 使单选按钮选择默认不基于值进行选择

angular - 使单选按钮选择默认不基于值进行选择

问题描述

我试图在默认情况下从一组单选按钮中创建一个按钮，以根据给定单选按钮的值进行选择，各个单选按钮具有值，但按值选择没有发生。

以下是我的帮助片段：

<div class="field">
  <div class="ui radio checkbox">
    <input [(ngModel)]="logisticsData.type"  
    type="radio" name="logistics" checked="checked" id="100" [value]="100" 
    [checked]="logisticsData.type == '100'">
    <label for="100">Logistic 1</label>
  </div>
</div>
<div class="field">
  <div class="ui radio checkbox">
    <input [(ngModel)]="logisticsData.type" 
    type="radio" name="logistics" id="101" [value]="101" 
    [checked]="logisticsData.type == '101'">
    <label for="101">Logistic 2</label>
  </div>
</div>
<div class="field">
  <div class="ui radio checkbox">
    <input [(ngModel)]="logisticsData.type"
    type="radio" name="logistics" id="102" [value]="102" 
    [checked]="logisticsData.type == '102'">
    <label for="102">Logistic 3</label>
  </div>
</div>
<div class="field">
  <div class="ui radio checkbox">
    <input [(ngModel)]="logisticsData.type" 
    type="radio" name="logistics" id="103" [value]="103" 
    [checked]="logisticsData.type == '103'">
    <label for="103">Logistic 4 </label>
  </div>
</div>

目前，logisticData.type的值为 103，但未选中按钮

标签： angular

解决方案

你的代码应该是这样的

HTML

<div class="field">
    <div *ngFor="let list of data; let idx = index" class="ui radio checkbox">
        <input type="radio" [(ngModel)]="logisticsData" name="radiogroup" [checked]="list.id === 102" [value]="list.id" />{{ list .description }}
        <label for="102">{{list.label}}</label>
    </div>
</div>

TS 代码

logisticsData = 102;
data = [ {id: 101, description: '101', label: 'Logistic 1' }, {id: 102,description: '102', label: 'Logistic 2'}, {id: 103,description: '103', label: 'Logistic 3'} ];

注意：- 您可以设置角度&& 的选中[checked]="list.id === 102"属性，您可以使用这样的 ts 代码默认分配logisticsData = 102;

硬编码 HTML 的第二个示例

<div class="field">
  <div class="ui radio checkbox">
    <input [(ngModel)]="logisticsData" type="radio" name="logistics" checked="checked" id="101" value="101" />
    <label for="101">Logistic 1</label>
  </div>
</div>
<div class="field">
  <div class="ui radio checkbox">
    <input [(ngModel)]="logisticsData" type="radio" name="logistics" id="102" value="102" />
    <label for="101">Logistic 2</label>
  </div>
</div>
<div class="field">
  <div class="ui radio checkbox">
    <input [(ngModel)]="logisticsData" type="radio" name="logistics" id="103" value="103" />
    <label for="102">Logistic 3</label>
  </div>
</div>
<div class="field">
  <div class="ui radio checkbox">
    <input [(ngModel)]="logisticsData.type" type="radio" name="logistics" id="104" value="104" />
    <label for="104">Logistic 4 </label>
  </div>
</div>

ts 代码

logisticsData = '102';

推荐阅读