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>

正如你所看到的，我已经应用了'dot practice'。编辑表单是我的详细信息表单上的弹出窗口。在我的详细信息表格中，我有这个：

<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>

设置初始值有效。当设置女性时，选择女性电台，当它是男性时，选择男性电台。

第二个问题是（并且我认为它与绑定有关），当选择男性时，我必须在女性上单击两次才能选择女性。

编辑：我创建了一个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/

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

Answer 2

我无法准确地解释它。但是你的范围内有太多嵌套对象了！

看看这个例子（小提琴：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属性。

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

要更改描述字段，您最好有一个专用的单选按钮模型，然后响应此模型的更改。

这在this小提琴演示。

绑定广播无法在Angular中工作

3 个答案: