AngularJS - 未选中单选按钮

Posted

技术标签:

【中文标题】AngularJS - 未选中单选按钮【英文标题】:AngularJS - Radio button not checked 【发布时间】:2017-06-21 02:17:51 【问题描述】:

我有一个ng-repeat,里面有一堆单选按钮:

<div class="panel panel-default" ng-repeat="offer in vm.offerList">
    ...    
    <td ng-show="offer.edit">
        <div class="row">                        
            <input type="radio" name="before" ng-model="offer.before" value="false">
            <input type="radio" name="before" ng-model="offer.before" value="true">
       </div>
   </td>
   ...
</div>

模型offer.before 具有正确的值,但是,当显示该行时,单选按钮未选中。为什么会这样?我需要单选按钮来显示选定的值。

这是我的问题的一个小提琴示例:http://jsfiddle.net/danielrvt/dpoLdgjq/

【问题讨论】:

【参考方案1】:

因为属性value 中的任何内容都获得toString() 类似值true 将被视为'true' 并且它将寻找'true'(string) 而不是true(boolean)。

最好使用ng-value 而不是value 属性。它会将true 值视为仅布尔类型的true

此外,在您的情况下,您必须添加 name 属性,使其对每个单选按钮组都是唯一的,每个 offer 元素单选将被视为唯一的表单元素。

标记

<div class="row">
    offer.before
    <input type="radio" name="before$index" ng-model="offer.before" ng-value="false">
    <input type="radio" name="before$index" ng-model="offer.before" ng-value="true">
</div>

Forked Fiddle

【讨论】:

@ChiefTwoPencils 我用 OP 的小提琴更新了答案。虽然感谢您的提醒:) 为什么例如这可以完美运行,但当 type='radio' 时却不行? 你能分享一个小提琴/plunkr吗? w3schools.com/code/tryit.asp?filename=GLX33M4EPJAC 什么问题,我试过了,但不知道你面临什么问题。你能详细说明一下吗? w3schools.com/code/tryit.asp?filename=GLX41P26BSR2

以上是关于AngularJS - 未选中单选按钮的主要内容,如果未能解决你的问题,请参考以下文章

在选择最后一个按钮之前,AngularJS 单选按钮未标记为 $dirty

离子单选按钮验证

验证单选按钮AngularJS

AngularJS:将布尔值绑定到单选按钮,以便在取消选中事件时将模型更新为 false

如果未选中单选按钮,如何将隐藏字段设置为零

滚动 UITableView 时单选按钮未选中