Question

我有一个非常简单的表单，我有Yes和No单选按钮。每个单选按钮都绑定到作用域中的相同项目（我使用的是AngularJS）。选择时，“是”按钮的值设置为“真”，选择时“否”按钮的值设置为“”。

当我单击Yes按钮一次时，模型和html元素都会正确更改。但是当我单击No单选按钮时，模型会正确更改，但html元素不会被选中。如果我再次单击否单选按钮，则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

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

1 个答案: