如何使用AngularJS搜索爛番茄API

Question

我正在嘗試使用angularjs創建爛番茄api的搜索。我希望能夠鍵入查詢按enter或go（在電話上），然後api返回查詢的結果。

我試圖將$scope.search附加到視圖中的輸入。我知道自己做錯了事，但由於缺乏經驗，我無法想象該怎麼做。尋找某人友善地指引我走向正確的方向。

查看

<input placeholder="Search for it" ng-model="search"> 

控制器

ctrls.controller('resultsCtrl', function($scope, $http){ 
    $scope.search = 'query'; 
    $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies.json', { 
     params: { 
      page_limit: '5', 
      page: '1', 
      q: $scope.search, 
      apikey: myKey, 
      callback: 'JSON_CALLBACK' 
     } 
    }) 
    .success(function (data) { 
     $scope.results = data.movies; 
    }); 
}); 

Answer 1

你將不得不使用一個函數，該函數

ctrls.controller('resultsCtrl', function($scope, $http){ 
    $scope.search = 'query'; 
    $scope.fetchResults = function(){ 
     $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies.json', { 
      params: { 
       page_limit: '5', 
       page: '1', 
       q: $scope.search, 
       apikey: myKey, 
       callback: 'JSON_CALLBACK' 
      } 
     }) 
     .success(function (data) { 
      $scope.results = data.movies; 
     }); 
    } 
}); 

，並從您的視圖調用它

<form ng-submit="fetchResults()"> 
    <input placeholder="Search for it" ng-model="search"> 
    <input type="submit" value="Go"/> 
</form>