Question

我正在尝试构建一个表单组件，允许用户创建某个数据字段的多个实例，但是从同一组输入中填充它们。

我正在使用ng-repeat为集合中的每个项目创建一个单选按钮，然后每个单选按钮的值都设置为重复的$index。单选按钮在$scope.selectedItem上建模，用于将输入指向正确的项目。

但是，出于某种原因，selectedItem永远不会改变，即使单选按钮的选定状态也是如此。

我尝试使用静态单选按钮进行类似的操作并且工作正常，这让我相信ng-model中的ng-repeat存在问题。

Answer 1

您需要为每个按钮添加ngModel。然后，由于ngRepeat的每次迭代都会创建一个新的隔离范围，因此您有两种方法可以在父控制器中引用您的变量：

在任何情况下，每个按钮都需要ngModel。

第一个选项：

<input type='radio' 
       name='select' 
       id='{{$index}}' 
       ng-value='$index' 
       ng-model='$parent.selectedItem'/>

第二个选项：

JS：

$scope.selectedItem = {id: -1};

HTML：

<input type='radio' 
       name='select' 
       id='{{$index}}' 
       ng-value='$index' 
       ng-model='selectedItem.id'/>

（以及在您引用selectedItem至selectedItem.id）