簡體   English   中英

如何填充md-autocomplete下拉列表?

[英]How to populate md-autocomplete dropdown list?

我正在嘗試將md-autocomplete與$ http()配合使用,可以在控制台中看到這些值,但無法顯示從api請求返回到自動完成功能的數據。 我嘗試使用return關鍵字返回存儲在JSON數組中的值。

      <md-autocomplete 
          md-autoselect=true
          placeholder="Search for films"
          md-items="item in querySearch(searchText)"
          md-item-text="item.title"
          md-min-length="2"
          md-search-text="searchText"
          md-selected-item="selectedItem">
        <md-item-template>
          <span class="films-title">
            <span md-highlight-flags="^i" md-highlight-text="searchText">
              {{item.title}}
            </span>
          </span>
        </md-item-template>
        <md-not-found>
          No match found.
        </md-not-found>
      </md-autocomplete>

我要顯示的數據存儲在JSON數組中,其內容可以在控制台中看到:

'use strict';

filmApp.controller('SearchController',function ($scope, $http){
    $scope.results = {
      values: []
    };

    $scope.querySearch = function (query) {
     $http({
        url: 'https://api.themoviedb.org/3/search/movie?include_adult=false&page=1',
        method: 'GET',
        params: { 
                 'query': query,
                 'api_key': apiKey
        }
      }).success(function (data, status) {

            for (var i = 0; i < data.results.length; i++) {
        $scope.results.values.push({title: data.results[i].original_title});

                    console.log($scope.results.values);      
                  return $scope.results.values;

                }
                console.log("STATUS: "+status);

            }).error(function (error) {
                console.log("ERROR: "+error);
            });
        };
    });

querySearch方法應該從promise中返回一個promise& promise.then您應該返回一個數據。 因此,在您的情況下,您使用了.success / .error回調(認為它們已被棄用),這是不允許從您的querySearch方法返回的承諾

$scope.querySearch = function (query) {
  return $http.get('https://api.themoviedb.org/3/search/movie?include_adult=false&page=1', {
         params: { 
             'query': query,
             'api_key': apiKey
         }
  }).then(function (data, status) {
       var data= response.data;
       for (var i = 0; i < data.results.length; i++) {
           $scope.results.values.push({title: data.results[i].original_title});
           console.log($scope.results.values);      
       }
       return $scope.results.values;
    })
};

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM