1

使用 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来说明我的问题。

4

3 回答 3

8

一种解决方案是使用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，您可以使用：（值将其内容评估为字符串）

<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 时，它不起作用，而是最初将整个性别对象绑定到性别模型。诡异的！

于 2013-06-20T09:08:56.410 回答
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

于 2013-06-20T09:05:11.090 回答
1

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

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

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

这在这个小提琴中得到了证明。

于 2013-06-20T09:27:24.057 回答