Mise à jour de select2 via un contrôleur angulaire ?

Question

J'essaie d'utiliser la directive $http d'Angular pour extraire une liste de tags d'un serveur et l'utiliser pour remplir un select2 select. Mon code ressemble à ceci :

    var samplePage = angular.module('samplePage', ['ui.select2']);

    samplePage.controller('sampleController', function($scope, $http) {
        console.log($scope);
        // THIS WORKS
        $scope.tags = ['a', 'b', 'c'];
        $http.get('angular.html').success(function(rc) {
            console.log($scope);
            // THIS DOES NOT WORK
            $scope.tags = ['d', 'e', 'f'];
        })
    });

    angular.bootstrap(document, ['samplePage']);

Cependant, les "tags" ne sont pas mis à jour ! Ou plutôt, "tags" est mis à jour mais le widget select2 ne semble pas se lier correctement.

La vue se présente comme suit :

<div ng-app="samplePage">
    <div ng-controller="sampleController">
    <input id="tags" ui-select2="{tags:tags, simple_tags: true}" multiple ng-model="myTags" style="width: 150px;">
    <p>$scope.tags = {{tags}}<p>
    </div>
</div>

Voici une liste de contrôle avec une application de test complète : https://gist.github.com/poundifdef/6544542

Est-ce que j'utilise mal le module select2 ? Ou y a-t-il un bug dans le module lui-même ?

Answer 1

En ng-model doit être la directive $scope qui alimentera l'entrée de sélection. Utiliser ng-model="tags" au lieu de cela.

EDIT Lorsque vous avez

<input id="tags" ui-select2="{tags:tags, simple_tags: true}" multiple ng-model="myTags" style="width: 150px;">

En tags en ui-select2="{tags:tags, simple_tags: true}" fait référence au modèle que vous souhaitez voir apparaître en tant qu'options dans la liste déroulante, tandis que myTags en ng-model="myTags" fait référence aux options sélectionnées.

Si vous souhaitez que la liste soit chargée avec certaines options sélectionnées, définissez-les dans le contrôleur comme suit $scope.myTags . Il s'agit normalement d'un sous-ensemble d'options (c'est-à-dire, $scope.tags ici).