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，请注意预先输入表达式：

<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(......)

typeahead从url key和api angularjs获取数据

3 个答案: