typeahead从url key和api angularjs获取数据

Question

嗨，我是Angularjs的新手。我正在尝试创建一个typeahead，其中我通过api获取数据。我试着寻找解决方案，但我找不到我想要的解决方案。下面是我到目前为止所做的代码。HTML代码：

<div ng-controller="newController">
    <div class="selection-box">
        <div class="title-box">
            <div class="search_item">
                <input name="document" ng-model='query' type="text" typeahead="document as document.name for document in documents | filter:query | limitTo:8" id='document' placeholder="SEARCH FOR YOUR DOCUMENT" class="search_box">
            </div>
            {{query}}
        </div>
    </div>
</div>

在此输入框中，无论我输入什么，都会在{{query}}中打印出来，但不会显示任何从api获取的数据。我正在使用bootstrap ui。下面是我写的控制器。

newController.js：

var myApp = angular.module('myModule', ['ui.bootstrap']);

myApp.service("searchService", function ($http) {
     var apiUrl = "http://12.56.677/api/v1/mobile/";
     var apiKey = "123nm";
     this.searchDocument = function(query) {
         var response = $http({
         method: 'post',
         url: apiUrl + "search",
         headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
         params: {
           key: apiKey,
           query: query
         }
      });
      return response;
    };
});

myApp.controller('newController', ['$scope', 'searchService' , function($scope, searchService, $rootScope, $http, $window, $document) {
    var apiUrl = "http://12.56.677/api/v1/mobile/";
    var apiKey = "123nm";
    url = apiUrl + "search";
    Key = apiKey;
    $scope.query  = undefined;
    console.log(query);
    searchService.searchDocument(query='').then (function (res) {
    if(res.data.status == "OK")
    {

        $scope.documents = res.data.result;
        console.log($scope.documents);
        // var userinformation = res.data.result;
        // $window.localStorageService.setItem('searchDocument',      JSON.stringify(query));
     }
     else {

         $scope.errorMessage = res.data.message;
     }
  })
 }])

任何帮助都将不胜感激。

Answer 1

  //HTML
  <input name="document" 
   ng-model='query' type="text" 
   uib-typeahead="document as document.name 
   for document in documents  |filter:query | limitTo:8" id='document' 
   placeholder="SEARCH FOR YOUR DOCUMENT" class="search_box">

  //Controller
  searchService.searchDocument('').then (function (res) {
    if(res.data.status == "OK"){
      $scope.documents = res.data.result;
    }
    else {
     $scope.errorMessage = res.data.message;
    }
  });

Answer 2

您尝试做的是使用带有预取列表的typeahead (带有空查询)。

您可能想要执行异步搜索，并且需要一个数据获取函数来执行此操作。

HTML，请注意typeahead表达式：

<input name="document" ng-model='query' type="text" 
       typeahead="document as document.name for document in (getDocuments() | limitTo:8)" 
       id='document' 
       placeholder="SEARCH FOR YOUR DOCUMENT" class="search_box">

控制器：

myApp.controller('newController', ['$scope', 'searchService' , function($scope, searchService, $rootScope, $http, $window, $document) {
    var apiUrl = "http://12.56.677/api/v1/mobile/";
    var apiKey = "123nm";

    // What are these two undeclared variables lying here around for?
    url = apiUrl + "search";
    Key = apiKey;

    $scope.getDocuments = function(query){
        searchService.searchDocument(query) // Check your API, I am not sure how you're API treats these parameters
            .then (function (res) {
                if(res.data.status == "OK")
                {
                    var documents = res.data.result;
                    console.log(documents);
                    return documents;
                }
                else {
                    $scope.errorMessage = res.data.message;
                    return [];
                }
            })
    }
}])

Answer 3

我认为您需要从searchService.searchDocment()返回promise，如下所示：

return searchService.searchDocument(query='').then(......)