I have a select2 directive for a multiple select of countries with a custom query to grab the data:
我有一个select2指令,用于多个国家/地区的自定义查询以获取数据:
// Directive
<input ng-model="filters.countries" ui-select2="filters.countryOptions"
data-placeholder="Choose a country...">
// filters.countryOptions
{
multiple: true,
query: function() {
get_list_of_countries();
}
}
// Formatted data from remote source
[
{id: 'US', text: 'United States'},
{id: 'CA', text: 'Canada'} ...
]
I'm trying to set the initially selected values in my controller using:
我正在尝试使用以下方法在控制器中设置最初选择的值:
$scope.filters.countries = [{id: 'US', text: 'United States'}];
This does correctly set the model, however this is happening before the select2 initialization has occurred. As I step through the remaining initialization code the input temporarily displays [Object]
before finally blanking out $scope.filters.countries
and the input, but it does not display the placeholder text in the input.
这确实正确地设置了模型,但这是在select2初始化发生之前发生的。当我单步执行剩余的初始化代码时,输入会在最终消隐$ scope.filters.countries和输入之前暂时显示[Object],但它不会在输入中显示占位符文本。
To get around this I'm using the following to reset the models' initial value:
为了解决这个问题,我使用以下方法重置模型的初始值:
$scope.$on('$viewContentLoaded', function() {
setTimeout(function() {
$scope.filters.countries = [{id: 'US', text: 'United States'}];
}, 100);
});
It seems really hackish to be using a setTimeout
. Is there a better way that I'm missing?
使用setTimeout似乎真的很苛刻。有没有更好的方法让我失踪?
Update 1
As requested by ProLoser here is a demo and github ticket.
根据ProLoser的要求,这里有一个demo和github票。
Demo: http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview
演示:http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p = preview
GitHub Issue: https://github.com/angular-ui/angular-ui/issues/455
GitHub问题:https://github.com/angular-ui/angular-ui/issues/455
Following ProLoser's advice I started using select2's initSelection function:
按照ProLoser的建议,我开始使用select2的initSelection函数:
initSelection : function (element, callback) {
callback($(element).data('$ngModelController').$modelValue);
},
It does the trick but still feels like a workaround.
这样做但仍然感觉像是一种解决方法。
2 个解决方案
#1
8
As requested by ProLoser here is a demo and github ticket.
根据ProLoser的要求,这里有一个demo和github票。
Demo: http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview
演示:http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p = preview
GitHub Issue: https://github.com/angular-ui/angular-ui/issues/455
GitHub问题:https://github.com/angular-ui/angular-ui/issues/455
Following ProLoser's advice I started using select2's initSelection function:
按照ProLoser的建议,我开始使用select2的initSelection函数:
initSelection : function (element, callback) {
callback($(element).data('$ngModelController').$modelValue);
},
It does the trick but still feels like a workaround.
这样做但仍然感觉像是一种解决方法。
#2
-1
Have you tried initialising your options as:
您是否尝试将选项初始化为:
<option selected value="0">Name</option>
#1
8
As requested by ProLoser here is a demo and github ticket.
根据ProLoser的要求,这里有一个demo和github票。
Demo: http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview
演示:http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p = preview
GitHub Issue: https://github.com/angular-ui/angular-ui/issues/455
GitHub问题:https://github.com/angular-ui/angular-ui/issues/455
Following ProLoser's advice I started using select2's initSelection function:
按照ProLoser的建议,我开始使用select2的initSelection函数:
initSelection : function (element, callback) {
callback($(element).data('$ngModelController').$modelValue);
},
It does the trick but still feels like a workaround.
这样做但仍然感觉像是一种解决方法。
#2
-1
Have you tried initialising your options as:
您是否尝试将选项初始化为:
<option selected value="0">Name</option>