与无线电绑定在 Angular 中不起作用

Question

使用 ng-repeat 我在编辑表单中显示一些收音机：

<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
    <input type="radio" name="gender"  value="{{gender.Id}}" data-ng-model="customerFormData.customer.Gender.Id" />{{gender.Description}}
</label>

如您所见，我应用了“点练习”。编辑表单是我的详细信息表单上的弹出窗口。在我的详细表格中，我有这个：

<tr>
    <td>Gender:</td>
    <td>{{ customer.Gender.Description }} </td>
</tr>

我在编辑表单中的所有绑定都正常工作，但我无法让性别绑定正常工作。我认为这与使用 ng-repeat 进行范围继承有关。

我也尝试过使用$parent，但结果还是一样：

<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
    <input type="radio" name="gender"  value="{{gender.Id}}" data-ng-model="$parent.customerFormData.customer.Gender.Id" />{{gender.Description}}
</label>

设置初始值有效。当设置为女性时，选择女性无线电，当设置为男性时，选择男性无线电。

A second problem is (and I think it has to do with the binding), is that when Male is selected, I have to click twice on female to get female selected.

编辑：我创建了一个Fiddle 来说明我的问题。

Answer 1

一种解决方案是使用ng-value（将其内容评估为表达式）并将其设置为整个性别对象，并将 ng-model 设置为 FormData 上的 Gender 对象。这样，当您更改输入时，性别对象将设置为 FormData.Gender，并且您可以访问 Id 和 Descr。

<label ng-repeat="gender in genders">    
  <input type="radio" name="gender" ng-value="gender" ng-model="customer.FormData.Gender">
  {{gender.Descr}}
</label>   

http://jsfiddle.net/ADukg/3194/

如果您只想要模型中的 Id，您可以使用：（value 将其内容评估为字符串）

<label ng-repeat="gender in genders">
  <input type="radio" name="gender" value="{{gender.Id}}" ng-model="customer.FormData.Gender.Id">
  {{gender.Descr}}
</label>

在控制器中：

$scope.customer.FormData.Gender = {Id : $scope.genders[1].Id};

http://jsfiddle.net/ADukg/3195/

奇怪的是，当您将 value 和 model 设置为 Id 时，它不起作用，而是最初将整个性别对象绑定到性别模型。奇怪！

Answer 2

我无法 100% 准确地解释它。但是你的作用域中有太多的嵌套对象！

看这个例子（小提琴：http://jsfiddle.net/ADukg/3193/）

<div ng-controller="MyCtrl">
    <label ng-repeat="gender in genders">
        <input type="radio" name="gender" value="{{ gender.Id }}" ng-model="$parent.selectedGenderId">{{gender.Descr}}
    </label>
</div>

function MyCtrl($scope) {
    $scope.genders = [{Id: 1, Descr:'Male'}, {Id:2, Descr:'Female'}];
    $scope.selectedGenderId = $scope.genders[1].Id;

    $scope.$watch('selectedGenderId', function(newValue, oldValue) {
        console.log("selectedGenderId=" + newValue);
        // TODO: set it into FormData?
    });
}

如果直接设置“selectedGenderId”也会正确设置。

我认为选择问题与绑定无关，而是与范围和通过许多对象嵌套的范围有关。

再看看这个解释： http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

Answer 3

问题在于单选按钮上的绑定。您正在绑定 customer.FormData.Gender.id 模型 - 请注意，您绑定的是 id 属性，而不是 Gender 属性。

因此，当您选择 Male 单选按钮时，只会更改性别上的 ID - 而不是 Descr 字段。 This 清楚地解释了这种行为。当您选择不同的单选按钮时，请注意仅更新 ID 而不是更新 Desc。

同样要更改 Descr 字段，明智的做法是为单选按钮创建一个专用模型，然后响应对此模型的更改。

这在this fiddle 中得到了演示。