使用angularjs中的typeahead将param传递给来自控制器的服务

时间:2016-08-31 13:13:10

标签: angularjs

Plunker

的答案中查看此SO

Plunker example

学习角度并且在控制器中有一个参数cityName,我不确定它是如何工作的。

我要做的是我有一个myController.js文件

var app = angular.module("sampleApp");

app.controller('TypeaheadCtrl',['$scope','search', function ($scope, search) {
   $scope.displayed=[];
    search.getResult(searchQuery)
          .then(function (data) {
              $scope.displayed = (data.records);
          });

}]);

myService.js

angular.module('sampleApp').factory('search', ['$q', '$http', function ($q, $http) {
    var sdo = {
        getResult: function (searchQuery) {
            var promise = $http({
                method: 'GET',
                url: 'http://somewhere.com'
                params: {
                    q: "a"
                }
            });
            promise.success(function (data, status, headers, conf) {
                return data;
            });

            return promise;
        }
    }
    return sdo;
}]);

我希望能够在预先输入框中输入第三个字符并将字符传递给服务后调用该服务

2 个答案:

答案 0 :(得分:0)

您应该在if [ "$(cut -d : -f 1-3 /sys/class/net/eth0/address)" = 01:02:03 ]; then 输入元素上使用typeahead-min-length="3"选项。

<强> HTML

typeahead

然后在控制器内部有一个函数,它将再次返回一个promise。

<input type="text" ng-model="result" 
  typeahead="suggestion for suggestion in getSuggestion($viewValue)" 
  typeahead-min-length="3"/>

由于您使用了$scope.getSuggestion = function (searchQuery){ return search.getResult(searchQuery) .then(function (data) { return data.records; }); }; ,因此数据将获得返回.success功能。 使用getResult链接promise,以便您可以从成功回调中返回数据。

<强>服务

.then

答案 1 :(得分:0)

像这样改变你的服务

app.factory('search', ['$q', '$http', function($q, $http) {
  var sdo = {};
  sdo.getResult = function(query) {
    var deferred = $q.defer();
    var url = "http://someurlpath/api/" + query;
    $http.get(url)
      .success(function(data) {
        deferred.resolve(data.data);
      }).error(function(msg, code) {
        deferred.reject(msg);
      });
    return deferred.promise;
  };
  return sdo;
}]);