AngularJs: I have the select droplist that calls a function only once when changed. How can I make it call the function whenever it is changed?
Question
I have a select drop-list options that populated countries form My database and I want on successful selection of a country/or change to call a function that retrieves regions based on the selected country by ng-change directive. So far so good the countries can be retrieved and populated in the select drop-list option control. Now: what I don't seem to understand is My directive only executes once and return the regions based on the selected option but if I repeat or change the country without refreshing the browser I get TypeError: v2.MyregionFunction is not a function . the MyregionFUnction references to the method I call to retrieve the regions its name is nationalRegions . Bellow is the code in action:
In index.html
<!DOCTYPE html>
<html ng-app="options" lang='en'>
<head>
<title>Select Countries App:</title>
<script src="appModule.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ctlOptions">
<label>Country:</label>
<select ng-model="userDomain" ng-options="location.otherName for location in userCountries" ng-change="nationalRegions(userDomain.idCountry)">
</select>
<label>Region:</label>
<select ng-model="regionDomain" ng-options="region.regionName for region in nationalRegions">
</body>
</html>
Now in appModule.js
var app=angular.module("options",[]);
app.factory('miscellaneous',function(){
return{
uiRequest:function(scope,inputString,callBack){
$.ajax({
type: "POST",
url:"appBackend.php",
data: {inputString:inputString},
dataType: "json",
success : function(jsonResponce){
if(callBack && typeof ( callBack )== "function")
{
callBack(jsonResponce);
scope.$apply();
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
scope.colorCode="danger";
scope.Error="Sorry, there seems to be some problem in your request. Please crosscheck provided informations.";
scope.$apply();
}
})
},
fetchCountries:function(scope){
var inputs={Controller:"service",Action:"userCountries"};
var inputString = JSON.stringify(inputs);
this.uiRootRequest(scope,inputString,function(responced){
scope.userCountries= responced;
scope.userDomain=scope.userCountries[0]
});
return scope.userDomain;
},
fetchRegions:function(scope,idCountry){
var inputs={idCountry:idCountry,Controller:"service",Action:"nationalRegions"};
var inputString = JSON.stringify(inputs);
this.uiRootRequest(scope,inputString,function(responced){
scope.nationalRegions= responced;
scope.regionDomain=scope.nationalRegions[0];
});
return scope.regionDomain;
}
}
});
And finally app.js
app.controller('ctlOptions',['$scope','miscellaneous',function ctlOptions($scope,miscellaneous){
$scope.userCountries=miscellaneous.fetchCountries($scope);
$scope.nationalRegions=function(idCountry){
miscellaneous.fetchRegions($scope,idCountry);
}
}]);
That is it can I get assistance where I am making a mistake please because as I said the codes function normally only once and problems arise when I re-select another country and sorry I have not included the appBackend.php file as to it there is no problems I hope it wont affect the debuging and if there seems to be something wrong please let Me know as its My first post here I may have many typo of the code but as it is on My local machine its perfect written without counting the problem in hand.
1 answers
solution1
0 2017-05-25 12:38:43
there is a solution that was even hard to trace in my code because it was perfect I'd say :) with a little exception that angularjs wont tell you either. Its here answered by Aaron Gray
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.