Use of ng-option
Question
Here i have created an array with countries, when i select a particular country then their list of states should be displayed in another select tab. How can i do that
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="item for item in names">
</select>
{{selectedName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["India", "US", "UK"];
});
</script>
</body>
</html>
3 answers
solution1
0 ACCPTED 2016-09-29 08:17:43
I'm going to give you a hint in the right direction, their are a ton of ways to do this and this is nowhere near a real world example.
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="item for item in names" ng-change="countrySelected()"></select>
{{selectedName}}
<select ng-model="selectedState" ng-options="item for item in states"></select>
{{selectedState}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["India", "US", "UK"];
$scope.states = [];
$scope.countrySelected = function () {
if ($scope.selectedName == "India") {
$scope.states = ["Some", "State"];
}
}
});
</script>
Normally you would have a structured data coming from your back-end, for example:
[{ country:"US", states: ["One", "Two"]}]
Once a country is selected, the states should be used in the other select box. Also some ID's would come from your backend, so you can send the selected countryID and stateID to the server once completed.
solution2
0 2016-09-29 08:19:16
Note that this is just one of numerous solutions given the limited information. Assuming you have a list of states per country collection:
//For example
$scope.listOfStatesPerCountry = {
country: {
name: 'India',
states: ['Northern-India', 'Southern-India']
}
country: {
name: 'US',
states: ['Alabama', 'Kentucky', 'California']
}
}
$scope.getStatesForCountry = function() {
if($scope.selectedCountry) {
return $scope.listOfStatesPerCountry[$scope.selectedCountry];
}
return [];
}
The according HTML
<select ng-model="selectedCountry" ng-options="country for country in listOfStatesPerCountry">
</select>
<select ng-options="state for state in getStatesForCountry()"></select>
solution3
0 2016-09-29 08:24:21
Here is the solution of your query.. First you need to hit the function when the value of the country changes. Then compare its value and get the states. Tested code ..
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-change="selectstate(selectedName)" ng-options="item for item in names">
</select>
<div ng-if='states'>
<select ng-model="selectedState" ng-options="item for item in states">
</select></div>
{{states}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["India", "UK", "US"];
$scope.selectstate = function(value){
if(value=='India'){
$scope.states = ["Chandigarh", "Punjab", "Bihar"];
}else if(value=='UK'){
$scope.states = ["fg", "jg", "fh"];
}else if(value=='US'){
$scope.states = ["fhgfj", "gjffg", "gfjjfg"];
}else{
//do nothing
}
alert(value)
}
});
</script>
<p>This example shows how to fill a dropdown list using the ng-options directive.</p>
</body>
</html>
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.