AngularJS - 单选按钮未被选中

Question

我有一个带有一堆单选按钮的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 的值是正确的，但是当行被显示时，单选按钮并没有被选中。为什么会发生这种情况？我需要单选按钮显示所选的值。

这是我的问题的 fiddle 示例：http://jsfiddle.net/danielrvt/dpoLdgjq/

- danielrvt

Answer 1

因为属性value内的任何内容都会像值true一样被toString()处理并被视为'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

- Pankaj Parkar

---

@ChiefTwoPencils 我已经更新了答案，并附上了 OP 的 fiddle。不过还是谢谢你提醒 :) - Pankaj Parkar

为什么例如这个可以完美运行，但是当type='radio'时就不行了呢？<input type='checkbox' ng-init='checkStatus=false' ng-model='checkStatus' ng-click='doIfChecked(checkStatus)'> - mramosch

你能分享一个 Fiddle/Plunkr 吗？ - Pankaj Parkar

有什么问题，我已经尝试了，但不知道你面临的是什么问题。你能否详细说明一下？ https://www.w3schools.com/code/tryit.asp?filename=GLX41P26BSR2 - Pankaj Parkar

那么，没有办法来回切换单选按钮的状态吗？也没有办法获取按钮当前的开/关状态吗？ - mramosch