Based on country selected , need to populate state and city
HTML:
-
you need to call the cities from the states selected just like how your calling states from countries
<body ng-controller="MainCtrl"> <p>Hello {{name}}!</p> <label for="country">Country *</label> <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"> <option value=''>Select</option> </select> <label for="state">State *</label> <select id="state" ng-disabled="!statessource" ng-model="model.state" ng-options="state for (state,city) in statessource" ng-change="GetSelectedState()"><option value=''>Select</option> </select> <label for="city">City *</label> <select id="city" ng-disabled="!model.state" ng-model="model.city" ng-options="city for city in model.state" ng-change="GetSelectedState()"><option value=''>Select</option> </select> </body>solved plunker
讨论(0) -
<!DOCTYPE html> <html data-ng-app="myApp"> <head> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <script src="script.js"></script> </head> <body data-ng-controller="testController"> <label for="country">Country *</label> <select id="country" ng-model="countrySrc" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"> <option value=''>Select</option> </select> <label for="state">State *</label> <select id="state" ng-disabled="!countrySrc" ng-model="stateSrc" ng-options="state for (state,city) in countrySrc" ng-change="GetSelectedState()"> <option value=''>Select</option> </select> <label for="city">City *</label> <select id="city" ng-disabled="!countrySrc || !stateSrc" ng-model="city" ng-options="city for city in stateSrc"> <option value=''>Select</option> </select> <script> angular .module('myApp', []) .run(function($rootScope) { $rootScope.title = 'myTest Page'; }) .controller('testController', ['$scope', function($scope) { $scope.countries = { 'USA': { 'Alabama': ['Montgomery', 'Birmingham'], 'California': ['Sacramento', 'Fremont'], 'Illinois': ['Springfield', 'Chicago'] }, 'India': { 'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'], 'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'], 'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur'] }, 'Australia': { 'New South Wales': ['Sydney'], 'Victoria': ['Melbourne'] } }; $scope.GetSelectedCountry = function() { $scope.strCountry = $scope.countrySrc; }; $scope.GetSelectedState = function() { $scope.strState = $scope.stateSrc; }; } ]) </script> </body> </html>Hope this solution helps.
讨论(0)
加载中...
- 热议问题