[英]Angular template reference variable for radio buttons
I know about this: 我知道这件事:
<input type="text" #inp>
<button type="button" (click)="onClick(inp.value)">Click</button>
So I get the value I typed into textbox without having to use ngModel directive. 所以我得到了我输入文本框的值,而不必使用ngModel指令。
Is there any similar approach to work with radio buttons without having to use ngModel? 有没有类似的方法来使用单选按钮而不必使用ngModel?
<input type="radio" value="selected" name="viewType">Selected
<input type="radio" value="unselected" name="viewType">Unselected
<input type="radio" value="both" name="viewType">Both
Below these radio buttons I have a refresh button like this: 在这些单选按钮下面,我有一个像这样的刷新按钮:
<button (click)="refreshView()">Refresh</button>
These html input elements aren't part of any form tag. 这些html输入元素不是任何表单标记的一部分。 What I want is to have a "refreshView" function call with a parameter - the selected radio button value. 我想要的是使用参数 - 所选单选按钮值进行“refreshView”函数调用。
Is this possible? 这可能吗?
If you have only a few radio buttons, the following syntax would work. 如果您只有几个单选按钮,则以下语法将起作用。 It gets the value associated with the radio button that is checked, with the help of nested conditional operators . 在嵌套条件运算符的帮助下,它获取与检查的单选按钮关联的值。
<input #rad1 type="radio" value="selected" name="viewType" >Selected
<input #rad2 type="radio" value="unselected" name="viewType" >Unselected
<input #rad3 type="radio" value="both" name="viewType" >Both
<button (click)="refreshView(rad1.checked ? rad1.value : rad2.checked ? rad2.value : rad3.checked ? rad3.value : null)">Refresh</button>
See this stackblitz for a demo. 有关演示,请参阅此stackblitz 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.