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="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.