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

Question

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

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

下面的示例只是较大的 html 页面和控制器的一部分，但我保持 Angular 模型结构相同，因为这可能是问题所在。

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 = {};
});

我创建了这个小提琴来演示这个问题。

http://jsfiddle.net/prajna78/Tdq9n/14/

我错过了什么？这似乎是一件很简单的事情。

Answer 1

您的代码存在一些问题。

首先，在单选按钮元素中使用ng-value 而不是value。这可以确保您绑定的值是布尔值 (true) 而不是字符串 ("true")。另外，您不需要ng-checked（ng-model 就足够了）。

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

此外，您绑定到item.isBeingPaidMinimumWage，但您的$scope 变量只是isBeingPaidMinimumWage，因此您在控制器中分配的初始值不会反映在视图中。

Demo