Add new parameter to $resource after using ngChange, Angular

Question

I am having trouble trying to append a new url parameter after selecting a genre to create a request to the API.

My ng-change is genreChange. When it been selected, it should automatically append the new url parameter like this &with_genre=fiction in the $scope.movies url before submitting the form with submitButton

<form ng-submit="submitButton()" name="cForm" class="form-horizontal">
    <h2>Discover the gems</h2>       
        <div class="form-group">
            <select class="form-control" ng-model="genreSelect" ng-change="genreChange()">
                <option ng-repeat="genre in genreList.genres" value="{{genre.id}}">{{genre.name}}</option>
             </select>    
        </div>

        <input type="submit" value="hello" />           
</form>

-

$scope.genreChange = function() {
    $scope.genreVar =  $scope.genreSelect;
    $scope.movies.get({with_genres: $scope.genreVar});
}

$scope.movies = $resource('http://api.themoviedb.org/3/discover/movie:action', {
    api_key: apikey,
    callback: 'JSON_CALLBACK'
}, {
    get: {
        method: 'JSONP'
    }
});

$scope.submitButton = function() {
    $scope.films = $scope.movies.get();
}

I am doing this method just in case a user leaves it blank.

Thanks

Do you do it for `put` or `get`. And what problem are you having? — Chandermani, Nov 12 '13 at 15:17
It same as you do for put `$scope.movies.get({with_genres: $scope.genreVar});`. Is it not working? — Chandermani, Nov 12 '13 at 15:30
I checked the Net console, it works but the submitButton() overrides it. Which means two calls are made, it should be one — Dimitri Kouvdis, Nov 12 '13 at 15:31
You should not make the call when calling `genreChange` method. Just store the param that you need to pass in a scope variable. Then pass it in the get method. — Chandermani, Nov 12 '13 at 15:42
That is exactly what I did earlier, but if the user ignore this selection, the param `with_genres=` with blank value will return with an error. — Dimitri Kouvdis, Nov 12 '13 at 16:29

score 0 · Accepted Answer · answered Nov 18 '13 at 01:48

This is what Resource.bind does.

var MovieResource = $resource('http://api.themoviedb.org/3/discover/movie:action', {
    api_key: apikey,
    callback: 'JSON_CALLBACK'
}, {
    get: {
        method: 'JSONP'
    }
});

$scope.movies = MovieResource;

$scope.genreChange = function() {
    $scope.genreVar =  $scope.genreSelect;
    $scope.movies = MovieResource.bind({with_genres: $scope.genreVar})
}

$scope.submitButton = function() {
    $scope.films = $scope.movies.get();
}

Add new parameter to $resource after using ngChange, Angular

1 Answers1