1

サードパーティの API にクエリを実行する小さなコードがあります。これですか：

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 側では、現在、1 つの特定の検索に基づいて、li に ng-repeat を使用して UL を表示しています。そのようです：

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

私の質問は、内部に書かれたテキストを検索クエリにバインドする入力フィールドを作成するにはどうすればよいですか? 文字列を ?=string に導入するように:

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

何かご意見は？

ありがとう！エリック

4

1 に答える 1

2

$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>

JS

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-12T23:53:15.870 に答える