angularjs - ng2 - select2 angular 6 example

Configuración de valores iniciales de la directiva múltiple Angular-UI Select2

Question

Tengo una directiva select2 para una selección múltiple de países con una consulta personalizada para capturar los datos:

// 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''} ...
]

Estoy tratando de establecer los valores seleccionados inicialmente en mi controlador usando:

$scope.filters.countries = [{id: ''US'', text: ''United States''}];

Esto establece correctamente el modelo, sin embargo, esto sucede antes de que se haya producido la inicialización de select2. A medida que paso por el código de inicialización restante, la entrada muestra temporalmente [Object] antes de finalmente borrar $scope.filters.countries y la entrada, pero no muestra el texto del marcador de posición en la entrada.

Para solucionar esto, estoy usando lo siguiente para restablecer el valor inicial de los modelos:

$scope.$on(''$viewContentLoaded'', function() {
    setTimeout(function() {
        $scope.filters.countries = [{id: ''US'', text: ''United States''}];
    }, 100);
});

Parece realmente hacker usar un setTimeout . ¿Hay alguna forma mejor de que me esté perdiendo?

Actualización 1

Según lo solicitado por ProLoser, aquí hay una demo y un boleto de github.

Demostración: http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview

Problema de GitHub: https://github.com/angular-ui/angular-ui/issues/455

Siguiendo los consejos de ProLoser, comencé a usar la función initSelection de select2:

initSelection : function (element, callback) {
  callback($(element).data(''$ngModelController'').$modelValue);
},

Lo hace el truco pero todavía se siente como una solución.

Answer 1

¿Has intentado inicializar tus opciones como:

<option selected value="0">Name</option>

Answer 2

Según lo solicitado por ProLoser, aquí hay una demo y un boleto de github.

Demostración: http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview

Problema de GitHub: https://github.com/angular-ui/angular-ui/issues/455

Siguiendo los consejos de ProLoser, comencé a usar la función initSelection de select2:

initSelection : function (element, callback) {
  callback($(element).data(''$ngModelController'').$modelValue);
},

Lo hace el truco pero todavía se siente como una solución.