javascript - 我想使用带有 ng-repeat 的单选按钮，但它不起作用

Question

这是我写的 AngularJS。

<script type="text/javascript">
    var app = angular.module("App1", []);
    app.controller("ctrl1", function ($scope, $filter) {
        $scope.GenderChoice = ["Male","Female"];
    });
</script>

下面的代码可以工作。当我更改单选按钮时，“性别”的值也会更改。

<input id="MaleOption" name="oo" type="radio" ng-model="Gender" value="{{GenderChoice[0]}}" />
    <input id="FemaleOption" name="oo" type="radio" ng-model="Gender" value="{{GenderChoice[1]}}" />

我想将 ng-repeat 与单选按钮一起使用。下面的这段代码不起作用。当我单击更改单选按钮时，“性别”没有响应。事实上，“性别”从来没有体现出值(value)。

<input ng-repeat="x in GenderChoice" id="{{x}}Option" name="oo" type="radio" ng-model="Gender" value="{{x}}" />

下面的代码也不起作用。

<input ng-repeat="x in GenderChoice" id="{{x}}Option" name="oo" type="radio" ng-model="Gender" value="{{GenderChoice[$index]}}" />

这些代码有什么问题。感谢您的提前。

Answer 1

ng-repeat 为每次迭代创建一个新的范围。由于JavaScript Prototype Inheritance affects Angular的方式，并且事实上您绑定(bind)到一个基元而不是一个对象，您实际上有两个单独的 Gender 属性，并且单选按钮没有互连。

解决此问题的首选方法是绑定(bind)到对象上的属性(“始终在绑定(bind)中使用点”规则)，这将自动暗示两个按钮具有相同的对象。即

app.controller("ctrl1", function ($scope, $filter) {
    $scope.GenderChoice = ["Male","Female"];
    $scope.selected = {};
});

<input ng-repeat="x in GenderChoice" 
       id="{{x}}Option" name="oo" type="radio" 
       ng-model="selected.Gender" value="{{x}}" />