Using resource to populate scope property in Angularjs

Question

DISCLAIMER I'm coming from knockout so I'm having a little trouble switching my train of thought on how to do certain things, this being one of them...

I have an <input> that a user can enter a movie title in and a list of movies should be displayed. The collection of movies is served up from my rest api by calling http://www.example.com/api/movies?title=matrix. The api is wrapped in an angular-resource module.

I thought that $scope.movies = Movie.query({ title: $scope.searchValue }); would automatically update anytime $scope.searchValue changed but it doesn't appear to work that way.

angular.module('robotdog.resources', ['ngResource'])
    .factory('Movie', function($resource){
        return $resource('/api/movies/:id');
    });

robotdog.controller('HomeController', function($scope, Movie){
    $scope.movies = Movie.query({ title: $scope.searchValue });

});

Just for the sake of completeness here is my markup for this particular controller...

<input type="text" ng-model="searchValue" placeholder="Search Movie Title"/>
<pre>{{ movies | json }}</pre>

What would be the correct way to populate $scope.movies with the search result after a user has entered a value in the <input>?

Answer 1

You're only calling Movie.query once, when the controller is initialized. You'll need to add a function to call Movie.query, and use that whenever the searchValue changes:

<input type="text" ng-model="searchValue" ng-change="getMovies" placeholder="Search Movie Title"/>


robotdog.controller('HomeController', function($scope, Movie) {
    $scope.getMovies = function() {
      $scope.movies = Movie.query({ title: $scope.searchValue });
    }
});

This will call your REST api whenever the user changes the input (i.e. on keypress), so if that causes too many RPCs you may want to add a 'search' button and only issue the RPC when it's hit:

<input type="text" ng-model="searchValue"/>
<button ng-click="getMovies">Go</button>

Answer 2

Or you can try:

<input type="text" ng-model="searchValue" />
<p ng-repeat="movie in movies | filter: searchValue">{{ movie }}</p>

No JS required in controller, apart from a basic query:

$scope.movies = Movie.query();

Check out the fiddle: http://jsfiddle.net/euan/zuhga76c/