Question

我有一个包含选项的数组，我希望用户能够选择一个选项。

这是我的选择：

 $scope.licenses = [...]

这是所选的选项：

 $scope.selectedLicense = $scope.licenses[0];

在我的标记中，我有：

    <ul>
        <li ng-repeat="lic in licenses">
            <input type="radio" ng-model="selectedLicense" value="lic"></input>
                {{lic.nrOfLicenses}}
        </li>
    </ul>

但是在开始时没有选择单选按钮。

小提琴：http://jsfiddle.net/HB7LU/9765/

我做错了什么？

Answer 1

您需要使用ng-value指令而不是值，这允许您使用范围对象。

<input type="radio" name="license" ng-model="selectedLicense" ng-value="lic"></input>

http://jsfiddle.net/2kqp2v46/

Answer 2

ng-repeat指令中的

为每次迭代创建子范围

检查documentation

每个模板实例都有自己的范围

所以当重复时，在每个子范围中都有一个名为selectedLicense的范围变量。所以你的$scope.selectedLicense没有按预期绑定到radio按钮。

这里你可以使用原型继承，这是JavaScript Prototypal Inheritance

的最佳答案

$scope.x = {};
$scope.x.selectedLicense = $scope.licenses[0].nrOfLicenses;

<input type="radio" ng-model="x.selectedLicense" ng-value="lic.nrOfLicenses"></input>
// here angular search the `selectedLicense` in the child scope and then it will search the x object in parent scope after it detect there is no `selectedLicense` in the child scope.

这是demo Fiddle

在上面的示例中，单选按钮绑定到对象中的nrOfLicenses属性。

如果要将radio绑定到整个对象，请按照

进行操作

$scope.x = {};
$scope.x.selectedLicense = $scope.licenses[0];

<input type="radio" ng-model="x.selectedLicense" ng-value="lic"></input>

这是demo Fiddle

在ng-repeat中使用单选按钮，有角度

2 个答案: