[英]ng-model changes all select at once
Hi. 你好。
I have a problem with my application. 我的申请有问题。 I have to write several selects by using ng-repeat and each of these selects must be filled with the same data. 我必须使用ng-repeat写几个选择,并且每个选择必须用相同的数据填充。
The problem is, when the one is changed, others selects are changes to the same value - why?. 问题是,当一个人改变时,其他选择是改变相同的值 - 为什么?
I suppose that the problem is in the ng-model - maybe I don't understand how the "hierarchy" of the ng-model works. 我想问题出在ng模型中 - 也许我不明白ng-model的“层次结构”是如何工作的。
HTML: 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: 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);
}
}
What am I doing wrong? 我究竟做错了什么?
Thanks a lot. 非常感谢。
You've created a scope object called "m" which is the current child of the "models" list. 您已经创建了一个名为“m”的范围对象,它是“模型”列表的当前子级。 So for each dropdown, you're going to have a different "m" scope object. 因此,对于每个下拉列表,您将拥有一个不同的“m”范围对象。 This is what you need to bind to in your ng-model so that the dropdown is bound to its unique parent in the "models" list. 这是您需要在ng-model中绑定的内容,以便下拉列表绑定到“models”列表中的唯一父级。
Change <select ng-model="models.m.opModel">
to <select ng-model="m.opModel"
to fix the problem. 将<select ng-model="m.opModel"
<select ng-model="models.m.opModel">
更改为<select ng-model="m.opModel"
以解决问题。
To access the value with the foo()
function, you'll need to use this updated function: 要使用foo()
函数访问该值,您需要使用此更新的函数:
$scope.foo = function(index){
alert($scope.models[index].opModel)
}
And update the <select>
like this: 并像这样更新<select>
:
<select ng-model="m.opModel" ng-options="opt.value as opt.text for opt in options" ng-change="foo($index)"></select>
You're creating an ng-model called "opModel" in the ng-repeat which means you'll have three new opModels under $scope.models. 你正在ng-repeat中创建一个名为“opModel”的ng模型,这意味着你将在$ scope.models下有三个新的opModel。 This is an array you can access later using an index value to specify which of the $scope.models[].opModel
you want to access. 这是一个稍后可以使用索引值访问的数组,用于指定要访问的$scope.models[].opModel
哪一个。
Notice that I've changed the ng-change
code to send the current $index which is basically an ng-repeat counter. 请注意,我已经更改了ng-change
代码以发送当前的$ index,它基本上是一个ng-repeat计数器。 So your foo()
function will receive either a 0, 1 or 2 which lets us access the specific ngModel that we need to access. 因此,您的foo()
函数将接收0,1或2,这样我们就可以访问我们需要访问的特定ngModel。
You are binding to the single object models
. 您绑定到单个对象models
。 Inside an ng-repeat the repeated is available "in scope". 在ng-repeat内部,重复可用于“范围内”。 You probably want to change this code to: 您可能希望将此代码更改为:
<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>
Look at the ng-model="m.opModel"
, that is what I've changed. 看看ng-model="m.opModel"
,就是我改变了。 You are now updating the value of the single item, and not inserting a new object into an array which is then reused by all the ng-repeat items (which is why all the values would update at the same time). 您现在正在更新单个项的值,而不是将新对象插入到数组中,然后由所有ng-repeat项重用(这就是为什么所有值将同时更新的原因)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.