[angularjs] how to call service method from ng-change of select in angularjs?

I am new to angular js. I am trying to call factory service method 'getScoreData' from ng-change of select, but not able to get it done. please help.

Html code:

<select ng-model="Score" ng-change="getScoreData(Score)" ng-options="c.name for c in     Scores"></select>

Angularjs code:

var app = angular.module('audiapp', []);

app.controller('audiLayoutCtrl', function ($scope, ScoreDataService) {
    ScoreDataService.getScoreData($scope.Score, function (data) {
        $scope.ScoreData = data;
    });
});

app.factory('ScoreDataService', function ($http) {
    return {
        getScoreData: function (Score, callback) {
            var params = {
                questionCode: Score.code
            }

            return $http({
                url: 'Home/GetAvgData',
                method: 'GET',
                params: params
            }).success(callback);
        }
    };
});

above is the service factory method and its instantiate from controller. I tried instantiating from ng-change of select but its neither giving error nor its getting called.

The answer is


You have at least two issues in your code:

  • ng-change="getScoreData(Score)

    Angular doesn't see getScoreData method that refers to defined service

  • getScoreData: function (Score, callback)

    We don't need to use callback since GET returns promise. Use then instead.

Here is a working example (I used random address only for simulation):

HTML

<select ng-model="score"
        ng-change="getScoreData(score)" 
        ng-options="score as score.name for score in  scores"></select>
    <pre>{{ScoreData|json}}</pre> 

JS

var fessmodule = angular.module('myModule', ['ngResource']);

fessmodule.controller('fessCntrl', function($scope, ScoreDataService) {

    $scope.scores = [{
        name: 'Bukit Batok Street 1',
        URL: 'http://maps.googleapis.com/maps/api/geocode/json?address=Singapore, SG, Singapore, 153 Bukit Batok Street 1&sensor=true'
    }, {
        name: 'London 8',
        URL: 'http://maps.googleapis.com/maps/api/geocode/json?address=Singapore, SG, Singapore, London 8&sensor=true'
    }];

    $scope.getScoreData = function(score) {
        ScoreDataService.getScoreData(score).then(function(result) {
            $scope.ScoreData = result;
        }, function(result) {
            alert("Error: No data returned");
        });
    };

});

fessmodule.$inject = ['$scope', 'ScoreDataService'];

fessmodule.factory('ScoreDataService', ['$http', '$q', function($http) {

    var factory = {
        getScoreData: function(score) {
            console.log(score);
            var data = $http({
                method: 'GET',
                url: score.URL
            });


            return data;
        }
    }
    return factory;
}]);

Demo Fiddle


Examples related to angularjs

AngularJs directive not updating another directive's scope ERROR in Cannot find module 'node-sass' CORS: credentials mode is 'include' CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400 Print Html template in Angular 2 (ng-print in Angular 2) $http.get(...).success is not a function Angular 1.6.0: "Possibly unhandled rejection" error Find object by its property in array of objects with AngularJS way Error: Cannot invoke an expression whose type lacks a call signature

Examples related to angularjs-directive

Angular2 - Input Field To Accept Only Numbers Use of symbols '@', '&', '=' and '>' in custom directive's scope binding: AngularJS ng-change not working on a text input Controller not a function, got undefined, while defining controllers globally Find child element in AngularJS directive Angular directives - when and how to use compile, controller, pre-link and post-link How to validate email id in angularJs using ng-pattern Enable/Disable Anchor Tags using AngularJS get original element from ng-click How to detect browser using angularjs?

Examples related to angularjs-service

Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined AngularJS Error: $injector:unpr Unknown Provider AngularJS : Factory and Service? how to call service method from ng-change of select in angularjs? AngularJS : When to use service instead of factory How to wait till the response comes from the $http request, in angularjs? How to access the services from RESTful API in my angularjs page? How do I configure different environments in Angular.js? AngularJS : The correct way of binding to a service properties AngularJS: Service vs provider vs factory

Examples related to angularjs-factory

AngularJS : Factory and Service? how to call service method from ng-change of select in angularjs? AngularJS : When to use service instead of factory AngularJS: Service vs provider vs factory

Examples related to angularjs-ng-change

ng-change not working on a text input how to call service method from ng-change of select in angularjs? Angularjs dynamic ng-pattern validation