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

if I type a value in the input and hit enter nothing happens. No request is sent and I get no error message in the console. — bflemi3
– bflemi3, Commented May 3, 2013 at 17:34

Jmr · Accepted Answer · 2013-05-03 17:48:15Z

3

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>

answered May 3, 2013 at 17:48

Jmr

12.1k4 gold badges41 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

imdahmd Over a year ago

FTFY: <button ng-click="getMovies()">Go</button>

Mr Office · Accepted Answer · 2014-09-01 12:34:53Z

0

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/

answered Sep 1, 2014 at 12:34

Mr Office

2901 silver badge9 bronze badges

Collectives™ on Stack Overflow

Using resource to populate scope property in Angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related