ng-model一次更改所有选择

Question

的jsfiddle

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

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

我想问题出在ng模型中 - 也许我不明白ng-model的“层次结构”是如何工作的。

• 如果ng-model的名称只是“选项” - 它不起作用！
• 如果ng-model的名称是“something.option” - 它也不起作用！
• 如果ng-model的名称是“something.else.option” - 它确实有效，但所有选择都被填充！

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="m.opModel" <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内部，重复可用于“范围内”。 您可能希望将此代码更改为：

<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项重用（这就是为什么所有值将同时更新的原因）。