AngularJS - 使用ng-repeat生成的单选按钮选项未更新模型

Question

我正在使用ng-repeat生成一系列单选按钮，然后尝试在选择其中一个时更新模型。但是似乎不起作用。

当单选按钮输入是硬编码的而不是由ng-repeat生成时，同样的标记正常工作。

这个可以正常工作：

<input type="radio" ng-model="lunch" value="chicken" name="lunch">
<input type="radio" ng-model="lunch" value="beef" name="lunch">
<input type="radio" ng-model="lunch" value="fish" name="lunch">  
{{lunch}}

这个不行：

<input type="radio" ng-model="lunch" ng-repeat="m in meat" value="m" name="lunch">    
{{lunch}}

请查看此处的 jsfiddle 示例：http://jsfiddle.net/mark_up/A2qCS/1/

感谢任何帮助。

谢谢。

- Mark Simpson

Answer 1

<div ng-controller="DynamicCtrl">
    <input type="radio" ng-model="$parent.lunch" ng-repeat="m in meat"  
    ng-value="m" name="lunch">    
    {{lunch}}
</div>

应该可以解决问题。

据我所知，ng-repeat会创建它自己的$scope，因此您需要引用$parent $scope;是的，AngularJS很棘手。另外，您还需要将value更改为ng-value。

- mpm

---

使用 $parent 的替代方案是在控制器中使用一个对象属性：$scope.selection = {lunch: 'chicken'};，然后在 HTML 中使用：<input type="radio" ng-model="selection.lunch" ng-repeat="m in meat" ng-value="m" name="lunch"> {{selection.lunch}}。 - Mark Rajcok

感谢@MarkRajcok！是将$scope.selection = {lunch: 'chicken'};放在控制器中帮助了我。我还发现需要从HTML单选按钮中删除我的ng-checked="true"，因为在控制器中设置它会自动/编程方式选择正确的单选按钮。 - Keith DC

@MarkRajcok ，使用对象属性避免使用 $parent 的原因是什么？ - Alok Mishra

@AlokMishra，使用$parent假定了某种HTML结构（例如，没有介入的ng-include或其他可能创建子作用域的指令）。使用对象属性，您不必担心如果更改HTML会破坏代码。 - Mark Rajcok

非常有帮助！！ - Alex Rindone

Answer 2

上述问题已在此处讨论。

这是因为ng-repeat创建了一个新的作用域。基本上，每个<input>都会在其自己的内部作用域中创建一个selectedOption值。为了解决这个问题，可以为该值创建一个新的容器对象。例如，您可以在控制器中声明：

$scope.data = {selectedOption: x};

然后在你的模板中使用ng-model="data.selectedOption"，

这样，ng-model就会得到更新..:)

这很棘手。

- Sajjad Ali Khan

Answer 3

只需要将value替换为ng-value

- Daniele