Angular.js 使用用户输入搜索 API URL

Question

我正在尝试使用用户输入搜索 URL。目前我可以通过 textinput 搜索城市的前三个字母在 URL 中。例如;如果我搜索 "sto"，则 URL 是 "find?q=sto&type"； sto 是本例中的三个字母。

controllers.controller('mainCtrl', function($rootScope, $http) {
  var url = "http://api.openweathermap.org/data/2.5/find?q=sto&type=like";
  var id = "&appid=d436c04d23a5a44329eb8255190a84be&callback=JSON_CALLBACK";
  var query = $rootScope.q = "";
  var apiCall = url += query += id;
  var promise = $http.jsonp(apiCall)
  promise.success(function(data){
      $rootScope.data = data;
      console.log($rootScope.data)
  });
});

<input type="text" data-ng-model="q"></input>

有没有办法不局限于 URL 中的三个字母“"find?q=sto&type"？允许对用户输入的任何字母进行搜索。

Answer 1

您可以使用 ng-change 指令并对每个用户输入进行动态 API 调用。

考虑对您的代码进行以下更改。

<input type="text" data-ng-model="q" ng-change="searchData()"></input>


controllers.controller('mainCtrl', function($rootScope, $http) {

$scope.searchData = function(){
  var url="http://api.openweathermap.org/data/2.5/find?q="+$scope.q+"&type=like";
  var id = "&appid=d436c04d23a5a44329eb8255190a84be&callback=JSON_CALLBACK";
  var query = $rootScope.q = "";
  var apiCall = url += query += id;
  var promise = $http.jsonp(apiCall)
  promise.success(function(data){
    $rootScope.data = data;
    console.log($rootScope.data)
  });
}

});

如果您想限制最少字符数，只需在调用 API 之前检查 $scope.q 的长度。

您也可以在作用域变量上使用 $watch 来实现。

Angular.js 使用用户输入搜索 API URL

Angular.js searching API URL with user input

angularjs

angularjs-scope

angularjs-ng-model