使用ngResource綁定輸入get（）使用AngularJS進行搜索

我有一小段代碼可以查詢第三方API。這是一個：使用ngResource綁定輸入get（）使用AngularJS進行搜索

angular.module('myApp', ['ngResource']) 
function Hello($scope, $http) { 

$http.get('http://api.discogs.com/database/search?type=artist&q=alva-noto&page=1&per_page=200'). 
    success(function(data3) { 
     $scope.results = data3.results; 
    }); 

};

在HTML端，現在我只是顯示一個UL與李NG重複，總部設在一個特定的搜索。像這樣：

<h1>Search</h1> 
    <ul> 
    <li ng-repeat="result in results">{{result.title}}</li> 
    </ul>

我的問題是，我怎麼能創建一個輸入字段綁定與搜索查詢寫在裏面的文本？像將字符串引入？=字符串：

$http.get('http://api.discogs.com/database/search?type=artist&q=string&page=1&per_page=200')

有什麼想法？

謝謝！ Eric

來源

2014-03-12 Eric Mitjans

使用$scope.$watch來設置偵聽器到輸入變量。

<div class="test" ng-controller="Ctrl"> 
    <input type="text" ng-model="name"> 
    <ul> 
    <li ng-repeat="result in results">{{result.title}}</li> 
    </ul> 
<div>

var app = angular.module('app', []); 

function Ctrl($scope, $http) { 
    var get_results = function(name) { 
      $http.get('http://api.discogs.com/database/search?type=artist&q='+ name + '&page=1&per_page=200'). 
     success(function(data3) { 
      $scope.results = data3.results; 
     }); 
    } 
    $scope.name = '' 
    $scope.$watch('name', get_results, true); 

}

工作JSFiddle

來源

2014-03-12 23:53:15

它出色的作品！還有一個問題：在查詢中我指定了type = artist，但是在結果中我也得到了發佈，其中一些甚至重複了好幾次。任何想法爲什麼發生這種情況？謝謝Valeh！ –

我觀察到，如果我使用上面顯示的代碼（不是jsfiddle中的代碼），它只會響應藝術家，但是默認值即使是name =''，也會顯示結果。如果我用jsfiddle中的大空格使用代碼，則默認爲空，但它會返回不是藝術家的結果。任何想法的解決方法？再次感謝！ –

不客氣！該問題與您使用的Web服務有關。所以你不能在客戶端解決它。 –

使用ngResource綁定輸入get（）使用AngularJS進行搜索

回答

相關問題