Question

您好。
我的申请有问题。我必须使用ng-repeat写几个选择，并且每个选择必须用相同的数据填充。

问题是，当一个更改时，其他人选择更改为相同的值 - 为什么？。

我认为问题出在ng模型中 - 也许我不明白＆＃34;层次结构＆＃34; ng-model的作品。

如果ng-model的名称仅为＆＃34;选项＆＃34; - 它不起作用！
如果ng-model的名称是＆＃34; something.option＆＃34; - 它也没有工作！
如果ng-model的名称是＆＃34; something.else.option＆＃34; - 它确实有效但所有选择都已填满！

HTML：

<div ng-controller="MyCtrl">
  <div ng-if="models" ng-repeat="m in models">
    <br><label>{{m.model}} ({{m.no}})</label><br>

    <select ng-model="models.m.opModel" ng-options="opt.value as opt.text for opt in options" ng-change="foo()"></select>
    </div>
 </div>

JS：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.models = [
         {'no':'A', 'model':'alpha'},
         {'no':'B', 'model':'beta'},
         {'no':'C', 'model':'gamma'}
         ];
    $scope.options = [
         {'value':1, 'text':'one'},
         {'value':2, 'text':'two'},
         {'value':3, 'text':'three'}
         ];

     $scope.foo = function(){
                alert($scope.models.m.opModel);
     }
}

我做错了什么？

非常感谢。

Answer 1

您已经创建了一个名为“m”的范围对象，它是“模型”列表的当前子级。因此，对于每个下拉列表，您将拥有一个不同的“m”范围对象。这是您需要在ng-model中绑定的内容，以便下拉列表绑定到“models”列表中的唯一父级。

将<select ng-model="models.m.opModel">更改为<select ng-model="m.opModel"以解决问题。

要使用foo()功能访问该值，您需要使用此更新功能：

 $scope.foo = function(index){
   alert($scope.models[index].opModel)
 }

并像这样更新<select>：

<select ng-model="m.opModel" ng-options="opt.value as opt.text for opt in options" ng-change="foo($index)"></select>

你正在ng-repeat中创建一个名为“opModel”的ng模型，这意味着你将在$ scope.models下有三个新的opModel。这是您稍后可以使用索引值访问的数组，以指定您要访问的$scope.models[].opModel中的哪一个。

请注意，我已将ng-change代码更改为发送当前$ index，这基本上是一个ng-repeat计数器。因此，您的foo()函数将收到0,1或2，这样我们就可以访问我们需要访问的特定ngModel。

Answer 2

您绑定到单个对象models。在ng-repeat中，重复可用＆＃34;在范围＆＃34;中。您可能希望将此代码更改为：

<div ng-controller="MyCtrl">
  <div ng-if="models" ng-repeat="m in models">
    <br><label>{{m.model}} ({{m.no}})</label><br>

    <select ng-model="m.opModel" ng-options="opt.value as opt.text for opt in options" ng-change="foo()"></select>
    </div>
 </div>

查看ng-model="m.opModel"，这就是我所改变的。您现在正在更新单个项的值，而不是将新对象插入到数组中，然后由所有ng-repeat项重用（这就是为什么所有值将同时更新的原因）。

ng-model一次更改所有选择

2 个答案: