web-dev-qa-db-fra.com

Angular UI select: Récupérer les données du service distant

J'utilise angular UI select.

https://github.com/angular-ui/ui-select

J'ai regardé la démo disponible sur ce plunkr

Je souhaite récupérer les données d'un service distant. Chaque fois que l'utilisateur tape quelque chose dans le champ de texte. Je souhaite récupérer les données du service distant avec des résultats filtrés en fonction de la valeur d'entrée.

J'ai écrit un service Web et le service Web fonctionne bien.

Comment puis-je utiliser angular ui select pour récupérer les données du service distant?

Actuellement, je suis un exemple simple de démo

  <ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>

availableColors est un tableau prédéfini. Je ne veux pas définir de tableau de données au préalable.

J'ai cherché sur Internet toute documentation ou tutoriel possible mais je n'ai rien trouvé d'utile.

javascripthtml5angularjsangular-ui
32
Syed

Dans votre exemple, vous devez d'abord initialiser votre availableColors comme un tableau vide:

$scope.availableColors = [];

Ensuite, vous pouvez écrire votre service simple avec $http:

$http.get('data.json').then(
  function (response) {
    $scope.availableColors = response.data;
    $scope.multipleDemo.colors = ['Blue','Red'];
  },
  function (response) {
    console.log('ERROR!!!');
  }
);

Ainsi, vous pouvez maintenant utiliser ce code sans prédéfinir votre availableColors par certaines valeurs.

Démo: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

Dans cet exemple, j'ai ajouté le fichier data.json qui contient un tableau de couleurs.

C'est un exemple très simple, mais j'espère que cela vous aidera. Les modifications commencent à partir de line 118 dans le fichier demo.js.

Modifier

Si vous souhaitez mettre à jour dynamiquement votre liste de choix - vous pouvez utiliser les attributs refresh et refresh-delay du ui-select-choices directive.

Comme vous pouvez le deviner, le premier attribut fonctionne comme

refresh="funcAsync($select.search)"

qui sera appelé à chaque fois que vous tapez quelque chose. Et vous pouvez utiliser le deuxième attribut comme

refresh-delay="0"

Comme vous pouvez le deviner, il est utilisé pour définir le délai d'appel de la fonction refresh en millisecondes. Par défaut, cette valeur est définie sur 1000.

Démo: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

J'ai mis à jour mon plunk, j'ai donc décidé de ne pas écrire mes propres fonctions backend. C'est pourquoi vous pouvez vérifier que cela fonctionne en tapant simplement red dans le premier ui-select champ - les valeurs seront obtenues à partir d'un autre .json fichier - data1.json.

J'espère que cela vous aidera.

56
ababashka