Question

我正在尝试使用用户输入搜索网址。目前，我可以搜索textinput，其中一个城市的前三个字母位于URL中。例如;如果我搜索＆＃34; sto＆＃34; URL是＆＃34; find？q = sto＆amp; type＆＃34 ;;在这种情况下， 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>

有没有办法不限于三个字母＆＃34;＆＃34;找到？q = sto＆amp; type＆＃34;在URL中？在任何字母上启用对用户输入的搜索。

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

1 个答案: