[英]Bind ng-options in ng-model on loading (like a bidirectional binding)
The situation: 情况:
I have the following select: 我有以下选择:
<select ng-model="model" ng-options="o as o.name for o in options track by o.code">
<option value="">- Default -</option>
</select>
My options
datas are like this: 我的
options
数据是这样的:
$scope.options = [{id: 1, code: 'foo', name: 'Foo!'}, {id: 2, code: 'bar', name: 'Bar!'}];
What I want to do: 我想做的事:
I want to have my select with a pre-selected value. 我希望我的选择具有预先选择的值。 My constraint is that I only know the
code
attribute of my object. 我的约束是我只知道我的对象的
code
属性。 With the help of the track by
notation I can do that simply like this: 随着的帮助下
track by
符号,我可以做到这一点简单地是这样的:
$scope.model = {code: 'bar'};
And it works, the selected value of the select is "Bar!" 它的工作原理,选择的选择值是“Bar!”
The problem: 问题:
When I send this data to my backend, I need to send the id
attribute of my object. 当我将这些数据发送到我的后端时,我需要发送我的对象的
id
属性。 The data sent is {code: 'bar'}
but not {id: 2, code: 'bar', name: 'Bar!'}
as I want. 发送的数据是
{code: 'bar'}
但不是我想要的{id: 2, code: 'bar', name: 'Bar!'}
。
For me it is the normal behavior... because I stored in my model {code: 'bar'}
and I did not change the value selected. 对我来说这是正常的行为...因为我存储在我的模型中
{code: 'bar'}
并且我没有更改所选的值。
The conclusion: 结论:
Is there a way to tell to AngularJS to copy the value from the options
list to model
when there is a default value in model
(when there is a match using the track by
notation) ? 有没有办法告诉AngularJS在
model
存在默认值时将options
列表中的值复制到model
(当track by
符号使用track by
匹配时)?
Info: I know that I can do something like this
$scope.model = $scope.options[2]
(with some logic to determine the index...) but I would like something more magical... If it is possible... :D信息:我知道我可以做这样的事情
$scope.model = $scope.options[2]
(用一些逻辑来确定索引......)但是我想要一些更神奇的东西......如果有可能的话。 ..:D
OP Info : I know that I can do something like this $scope.model = $scope.options[2] (with some logic to determine the index...) but I would like something more magical... If it is possible... :D
OP信息 :我知道我可以做这样的事情$ scope.model = $ scope.options [2](用一些逻辑来确定索引...)但是我想要一些更神奇的东西...如果可能的话......:D
I have 3 magic's for your 3 objects 我的3个物体有3个魔法
$scope.model = $scope.options.filter(function(item) {
return item.code=== 'bar';
})[0];
app.filter('getById', function() {
return function(input, id) {
var i=0, len=input.length;
for (; i<len; i++) {
if (+input[i].id == +id) {
return input[i];
}
}
return null;
}
});
$scope.model = $filter('getById')($scope.options, 2);
angular.forEach($scope.options, function(option) {
$scope.model = option.name == "name";
if($scope.model !=null){break}
});
You need to add a ng-change
on the <select>
and then create a function that will look for the selected option and its corresponding JSON model. 您需要在
<select>
上添加ng-change
,然后创建一个函数来查找所选选项及其相应的JSON模型。 Use this 用这个
HTML HTML
<div ng-app='app' ng-controller='mainCtrl'>
<select ng-model="model" ng-options="o as o.name for o in options track by o.code"
ng-change='getValue(this)'>
<option value="">- Default -</option>
</select>
</div>
CONTROLLER CONTROLLER
angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
$scope.options = [{id: 1, code: 'foo', name: 'Foo!'}, {id: 2, code: 'bar', name: 'Bar!'}];
$scope.model = {code: 'bar'};
$scope.getValue = function(item){
console.log($scope.selectedOption = item.model);
}
});
Whenever you will select the option in the <select>
box you will see the actual JSON object for that option printed in the console. 每当您在
<select>
框中选择该选项时,您将在控制台中看到该选项的实际JSON对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.