how to call service method from ng-change of select in angularjs?
112,887
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. Usethen
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
Author by
Samir Shah
Updated on July 09, 2022Comments
-
Samir Shah almost 2 years
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.