각도 UI 선택 : 원격 서비스에서 데이터 가져오기

각도 UI 선택 : 원격 서비스에서 데이터 가져오기

각도 UI 선택을 사용하고 있습니다.

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

이 plunkr에서 데모를 볼 수 있는 곳을 둘러봤는데

원격 서비스에서 데이터를 가져오려고 합니다.사용자가 텍스트 필드에 무언가를 입력할 때마다입력 값을 기준으로 필터링된 결과를 사용하여 원격 서비스에서 데이터를 가져오려고 합니다.

웹 서비스를 작성했는데 웹 서비스는 잘 작동하고 있습니다.

angular ui select를 사용하여 원격 서비스에서 데이터를 가져오려면 어떻게 해야 합니까?

현재 데모의 간단한 예를 따르고 있습니다.

  <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는 사전 정의된 배열입니다.미리 데이터 배열을 정의하고 싶지 않습니다.

가능한 문서나 튜토리얼이 없는지 인터넷을 둘러보았지만 도움이 되는 것을 찾을 수 없었습니다.

이 예에서는 처음에 다음 명령어를 초기화해야 합니다.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.

호프, 도움이 될 거야

당신이 말한 이후:

사용자가 입력란에 값을 입력할 때마다 서비스를 호출하고 텍스트 상자에 입력된 값을 기준으로 필터링된 결과를 반환합니다.

그래야 할 것 같아요$watch변경을 위한 입력값 및 값이 변경되었을 때 리모트소스에 문의합니다.

언급URL : https://stackoverflow.com/questions/26061411/angular-ui-select-fetch-data-from-remote-service