Question

此处有国家，州和城市过滤器下拉列表。我不想要国家。我只想要州和城市的下拉菜单。如果我选择州，它应该填充适当的城市。

只在我想要的印度国家和城市。任何人都可以帮我这样做。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $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 = document.getElementById("country").value;
            };
            $scope.GetSelectedState = function () {
                $scope.strState = document.getElementById("state").value;
            };
            $scope.GetSelectedcity = function () {
                $scope.strCity = document.getElementById("city").value;
            };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <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"
         ><option value=''>Select</option>
 </select>
  </body>

</html>

任何人都可以请更新此代码。

Answer 1

在定义$scope.statessource这样的$scope.countries之后，您可以在控制器中将默认值设置为$scope.statessource = $scope.countries.India;。如果您不希望用户更改国家/地区，则可以删除国家/地区下拉列表。

州和城市填充下拉列表

1 个答案: