Javascript 必须单击两次单选按钮才能使用AngularJS更改html元素

我有一个非常简单的表单，其中有“是”和“否”单选按钮。每个单选按钮都绑定到范围中的同一项（我使用的是AngularJS）。“是”按钮的值在被选中时设置为true，而“否”按钮的值在被选中时设置为false

当我单击一次Yes按钮时，模型和html元素都会正确更改。但是当我单击No单选按钮时，模型会正确更改，但是html元素不会被选中。如果我再次单击No单选按钮，html元素将变为正确的选定状态

下面的例子只是一个更大的html页面和控制器的一部分，但我保持了角度模型结构不变，因为这可能就是问题所在

HTML:

<div ng-app="myApp">
  <div ng-conroller="MyController">
    <div>
                <label>
                    <input type="radio" name="IsBeingPaid" ng-model="item.isBeingPaid" ng-checked="item.isBeingPaid" value="true"/>
                    Yes
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="IsBeingPaid" ng-model="item.isBeingPaid" ng-checked="!item.isBeingPaid" value="false"/>
                    No 
                </label>
                <p>{{item.isBeingPaid}}</p>
            </div>
  </div>
</div>

var app = angular.module('myApp', [
  'my.controllers'
]);

var controllers = angular.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
    $scope.item = {};
});

我制作了这把小提琴来演示这个问题

---

我错过了什么？这看起来很简单。

您的代码有一些问题

首先，在单选按钮元素中使用

ng value

而不是

value

。这样可以确保绑定到的值是布尔值（

true

），而不是字符串（

“true”

）。此外，您不需要检查

ng

（

ng型号

就足够了）

另外，您绑定到

项。isBeingPaidMinimumWage

，但您的

$scope

变量只是

isBeingPaidMinimumWage

，因此您在控制器中分配的初始值不会反映在视图中

---

感谢Jerrad的可能副本。ng值修复了它。

<input type="radio" name="IsBeingPaidMinimumWage" ng-model="isBeingPaidMinimumWage" ng-value="true"/>