angularjs - change - select angular 5
¿Cómo llamar al método de servicio desde ng-change of select en angularjs? (1)
Soy nuevo en angular js. Estoy tratando de llamar al método de servicio de fábrica ''getScoreData'' desde ng-change of select, pero no puedo hacerlo. por favor ayuda.
Código HTML:
<select ng-model="Score" ng-change="getScoreData(Score)" ng-options="c.name for c in Scores"></select>
Código Angularjs:
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);
}
};
});
arriba está el método de fábrica de servicio y su instancia desde el controlador. Intenté crear instancias desde ng-change of select, pero no da error ni se llama.
Tienes al menos dos problemas en tu código:
ng-change="getScoreData(Score)Angular no ve el método
getScoreDataque se refiere al servicio definidogetScoreData: function (Score, callback)No necesitamos utilizar la devolución de llamada ya que
GETdevuelve la promesa. Utilicethenlugar.
Aquí hay un ejemplo de trabajo (usé una dirección aleatoria solo para simulación)
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