Question

7

Angular UI select : Fetch data from remote service

rated 0 times [ 14] [ 7] / answers: 1 / hits: 41868 / 10 Years ago, fri, september 26, 2014, 12:00:00

I am using angular UI select.

I looked around the demo's available at this plunkr

I want to fetch data from a remote service. Every time user types something into the text field. I want to fetch data from remote service with results filtered based on input value.

I have written a web service and web service is working fine.

How can I use angular ui select to fetch data from remote service ?

Currently I am following simple example from demo

  <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 is a predefined array. I don't want to define data array beforehand.

I have been looking around the Internet for any possible documentation or tutorial but not able to find anything useful.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dayanaracolleeng

Add To Favorites

Follow

Total Points: 7

Total Questions: 96

Total Answers: 104

Location: Mayotte

Member since Mon, Sep 12, 2022

2 Years ago

dayanaracolleeng questions

1 How to Upload file in a directory to minIO bucket

Wed, Jul 20, 22, 00:00, 2 Years ago

1 NextJs router push unknown key passed via urlObject

Sat, Dec 11, 21, 00:00, 3 Years ago

1 Next.js catch-all / as routing

Sun, Jun 27, 21, 00:00, 3 Years ago

1 Getting `Cannot find module '.next\server\pages-manifest.json'` error when trying to add `babel.config.js` in nextjs app

Sun, Mar 14, 21, 00:00, 3 Years ago

1 document.querySelector in Angular

Wed, Jan 27, 21, 00:00, 3 Years ago

View All

answered 10 Years ago deving · Accepted Answer

In your example, at first you must initialize your availableColors as an empty array:

$scope.availableColors = [];

Then, you can write your simple service with $http:

$http.get('data.json').then(

  function (response) {

    $scope.availableColors = response.data;

    $scope.multipleDemo.colors = ['Blue','Red'];

  },

  function (response) {

    console.log('ERROR!!!');

  }

);

So, now you can use this code without pre-defining your availableColors by some values.

Demo: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

In this example I added file data.json which contains an array of colors.

It's a very simple example, but I hope that it will help you. Changes start from line 118 in file demo.js.

Edit

If you want to dynamically update your list of choices - you can use the attributes refresh and refresh-delay of the ui-select-choices directive.

The first attribute, as you can guess, gets function like

refresh="funcAsync($select.search)"

which will be called every time you type anything. And you can use the second attribute as

refresh-delay="0"

As you can guess it is used for set delay of calling refresh function in milliseconds. By default this value is set to 1000.

Demo: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

I updated my plunk, so I decided not to write own backend functions. That's why you can check it works by simply typing red in the first ui-select field - values will be got from another .json file - data1.json.

Hope, it will help you.