AngularJS - 未选中单选按钮

时间:2017-02-03 16:32:49

标签: javascript html angularjs radio-button

我有一个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 个答案:

答案 0 :(得分:5)

因为属性value内的所有内容toString()都会被视为true&amp; 'true'它将查找'true'(字符串)而不是true(布尔值)。

最好使用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