[英]unable to set the radio button value selected on button click in list group using angular
Here the requirement is I am displaying the radio button as list group in each list we have 2 buttons with click functionality and whenever the user clicks on that button, it should automatically select the radio button too. 这里的要求是我在每个列表中将单选按钮显示为列表组,我们有2个具有单击功能的按钮,每当用户单击该按钮时,它也应该自动选择单选按钮。 Now I am able to place button and radio button selected button I m not able to select the radio button when the respective sub button is clicked, below is code and Stackblitz 现在我可以放置按钮和单选按钮选择的按钮,当单击相应的子按钮时,我无法选择单选按钮,下面是代码和Stackblitz
<div class="text-center mt-5">
<h4>Selected value is {{radioSel.name}}</h4>
<div>
<ul class="list-group">
<li class="list-group-item" *ngFor="let item of data">
<input type="radio" [(ngModel)]="radioSelected" name="list_name" value="{{item.value}}" (change)="onItemChange(item)" /> {{item.name}}
<span (click)="one(item.name,'A')">A</span>
<span (click)="two(item.name,'B')">B</span>
</li>
</ul>
</div>
<h5>{{radioSelectedString}}</h5>
</div>
TS code TS码
radioSel:any;
radioSelected:string;
radioSelectedString:string;
public data = [
{
name:'Item 1',
value:'item_1'
},
{
name:'Item 2',
value:'item_2'
},
{
name:'Item 3',
value:'item_3'
},
{
name:'Item 4',
value:'item_4'
},
{
name:'Item 5',
value:'item_5'
}
];
constructor() {
this.radioSelected = "item_3";
this.getSelecteditem();
}
getSelecteditem(){
this.radioSel = this.data.find(Item => Item.value === this.radioSelected);
this.radioSelectedString = JSON.stringify(this.radioSel);
}
onItemChange(item){
this.getSelecteditem();
}
one(data,data1,data2){
console.log(data,data1,data2);
}
two(data,data1,data2){
console.log(data,data1,data2);
this.radioSelected = data;
this.data.find(item => item.value === this.radioSelected);
}
Stackblitz URL::--> https://stackblitz.com/edit/angular-e7utfs and if I click on the other external button I need to get the radio button values Stackblitz URL ::-> https://stackblitz.com/edit/angular-e7utfs ,如果我单击其他外部按钮,则需要获取单选按钮值
I have tried to solve this with the following approach. 我试图用以下方法解决这个问题。
Assigned a dynamic id to each radio button id="{{ item.name }}"
. 为每个单选按钮id="{{ item.name }}"
指定一个动态ID。 A method onButtonClick(item, i)
is fired on every button click. 每次单击按钮都会触发onButtonClick(item, i)
方法。 Inside the method, I am setting the input element checked
flag to true
在方法内部,我将输入元素checked
标志设置为true
HTML HTML
<div class="text-center mt-5">
<h4>Selected value is {{radioSel.name}}</h4>
<div>
<ul class="list-group">
<li class="list-group-item" *ngFor="let item of data; let i = index">
<input type="radio" id="{{ item.name }}" [(ngModel)]="radioSelected" name="list_name" value="{{item.value}}" (change)="onItemChange(item)" />
{{item.name}}
<button (click)="onButtonClick(item)">A</button>
<button (click)="two(item.name,'B')">B</button>
</li>
</ul>
</div>
<h5>{{radioSelectedString}}</h5>
</div>
TS Code TS代码
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
radioSel:any;
radioSelected:string;
radioSelectedString:string;
public data = [
{
name:'Item 1',
value:'item_1'
},
{
name:'Item 2',
value:'item_2'
},
{
name:'Item 3',
value:'item_3'
},
{
name:'Item 4',
value:'item_4'
},
{
name:'Item 5',
value:'item_5'
}
];
constructor() {
this.radioSelected = "item_3";
this.getSelecteditem();
}
getSelecteditem(){
this.radioSel = this.data.find(Item => Item.value === this.radioSelected);
this.radioSelectedString = JSON.stringify(this.radioSel);
}
onItemChange(item){
this.getSelecteditem();
}
one(data,data1){
console.log(data,data1);
}
two(data,data1){
console.log(data,data1);
this.radioSelected = data;
}
onButtonClick(data) {
const el = document.getElementById(data.name) as HTMLInputElement;
el.checked = true;
}
}
In the given code, you are setting a value with item.name
when button B is clicked. 在给定的代码中,单击按钮B时将使用item.name
设置值。
It has to be item.value
instead of item.name
since input
tag is bound with item.value
. 它必须item.value
而不是item.name
因为input
标签绑定了item.value
。
HTML: HTML:
<span (click)="two(item.value,'B')">B</span>
TS: TS:
two(data, data1) {
console.log(data, data1);
this.radioSelected = data;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.