Angular Выбор пользовательского интерфейса: выборка данных из удаленного сервиса

Я использую angular UI select.

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

Я просмотрел демо, доступное в этом plunkr

Я хочу получить данные из удаленной службы. Каждый раз, когда пользователь вводит что-то в текстовое поле. Я хочу получить данные из удаленного сервиса с результатами, отфильтрованными на основе входного значения.

Я написал веб-сервис, и веб-сервис работает нормально.

Как я могу использовать angular ui для выбора данных из удаленного сервиса?

В настоящее время я следую простому примеру из демонстрации

  <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 - предопределенный массив. Я не хочу заранее определять массив данных.

Я просматриваю Интернет для любой возможной документации или учебника, но не могу найти ничего полезного.

Ответы

Ответ 1

В вашем примере сначала вы должны инициализировать свой availableColors как пустой массив:

$scope.availableColors = [];

Затем вы можете написать свой простой сервис с помощью $http:

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

Итак, теперь вы можете использовать этот код без предварительного определения вашего availableColors по некоторым значениям.

Демо: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

В этом примере я добавил файл data.json, который содержит массив цветов.

Это очень простой пример, но я надеюсь, что он вам поможет. Изменения начинаются с line 118 в файле demo.js.

Изменить

Если вы хотите динамически обновлять список вариантов, вы можете использовать атрибуты refresh и refresh-delay директивы ui-select-choices.

Первый атрибут, как вы можете догадаться, получает функцию типа

refresh="funcAsync($select.search)"

который будет вызываться каждый раз, когда вы вводите что-либо. И вы можете использовать второй атрибут как

refresh-delay="0"

Как вы можете предположить, он используется для заданной задержки вызова функции refresh в миллисекундах. По умолчанию для этого значения установлено значение 1000.

Демо: http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

Я обновил свой плунжер, поэтому решил не писать собственные бэкэнд-функции. Вот почему вы можете проверить это, просто набрав red в первом поле ui-select - значения будут получены из другого файла .json - data1.json.

Надеюсь, это поможет вам.

Ответ 2

Так как вы сказали:

Я хочу вызвать службу каждый раз, когда пользователь вводит некоторые значения в поле ввода, и служба вернет отфильтрованный результат на основе ввода значения в текстовом поле.

Я считаю, что вы должны $watch ввести значение для изменения и запросить удаленный источник при изменении значения