ng模型一次更改所有select

Question

jsfiddle

嗨
我的申请有问题。我必须使用ng repeat写几个选择，每个选择都必须用相同的数据填充。

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

我想问题出在ng模型上——也许我不明白ng模型的"层次结构"是如何运作的。

• 如果ng模型的名称只是"option"，那就行不通了
• 如果ng模型的名称是"something.option"，那么它也不会工作
• 如果ng模型的名称是"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"的范围对象，它是"models"列表的当前子对象。因此，对于每个下拉列表，您将有一个不同的"m"范围对象。这是您需要在ng模型中绑定到的内容，以便下拉列表绑定到"模型"列表中唯一的父项。

将<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重复计数器。因此，您的foo()函数将收到一个0、1或2，使我们可以访问需要访问的特定ngModel。

Answer 2

您正在绑定到单个对象models。在ng repeat中，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个重复项重用（这就是为什么所有值都会同时更新）。