사용자 입력이있는 Angular.js 검색 API URL

Question

사용자 입력을 사용하여 URL을 검색하려고합니다. 현재는 도시의 처음 세 글자가 URL에있는 곳에서 텍스트 입력을 검색 할 수 있습니다. 예를 들어; "sto"를 검색하면 URL은 "find? q = sto & type"입니다. 스토어은이 경우 세 글자입니다.

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에 "? Q = STO & 유형을 찾을 수"있습니다.

는

Answer 1

당신은 을 사용할 수 있습니다 NG 변화 지침 및 모든 단일 사용자 입력에 대한 동적 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을 사용하여이를 수행 할 수도 있습니다.