0

我试图实现基于 country 、 state 、 city 的级联下拉列表，这些下拉列表是从我附加的以下链接中找到的，我对使用数组和 ng-option 键值对的 ng-options 的正则表达式感到困惑。

我尝试了一些来自在线的示例，以了解 ng-options 如何与以下示例一起使用

https://gist.github.com/marlonbbernal/08451bdbcff5986bcb9a

http://embed.plnkr.co/vxgO1a/

我对 ng-options 的以下表达式用法感到困惑：

link1 for ng-options :    

<select id="country" ng-model="statessource"  
         ng-options="country for (country, states) in countries"  
         ng-change="GetSelectedCountry()">
         <option value=''>Select</option>
</select>

  $scope.GetSelectedCountry = function () {
       $scope.strCountry = document.getElementById("country").value;           
  };

how to achieve the state directly in options ?..
Can any one please ,  explain how ng-option expression works. i will be 
monitoring this thread, actively !..
4

1 回答 1

0

为了解释您的问题，请先查看变量：$scope.countries，它是一个带有 (key,value) 对的对象。

$scope.countries = {
                        'India': {
                            'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                            'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                            'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                        },
                        'USA': {
                            'Alabama': ['Montgomery', 'Birmingham'],
                            'California': ['Sacramento', 'Fremont'],
                            'Illinois': ['Springfield', 'Chicago']
                        },
                        'Australia': {
                            'New South Wales': ['Sydney'],
                            'Victoria': ['Melbourne']
                        }
                    };

键是“印度”、“美国”和“澳大利亚”，对于（键、值）对，每个键都有一个值。例如，如果您使用

$scope.countries['India']

然后你会得到

                        {
                            'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                            'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                            'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                        }

如果你使用

 $scope.countries['USA']

然后你会得到：

                        {
                            'Alabama': ['Montgomery', 'Birmingham'],
                            'California': ['Sacramento', 'Fremont'],
                            'Illinois': ['Springfield', 'Chicago']
                        }

现在，考虑你的问题：

<select id="country" ng-model="statessource"  
         ng-options="country for (country, states) in countries"  
         ng-change="GetSelectedCountry()">
         <option value=''>Select</option>
</select>

ng-options="country for (country, states) in countries" 国家是对象的键，状态是值，所以你会看到国家的列表，你可以从键中选择字符串('India','美国'，'澳大利亚'）组合。如果您选择“印度”，则以下对象：

                    {
                        'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                        'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                        'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                    }

将作为范围变量保存在您的 statessource 中，因为您使用代码 ng-model="statessource"。

如果您选择“USA”，则以下对象将存储在“statessource”变量中。

                        {
                            'Alabama': ['Montgomery', 'Birmingham'],
                            'California': ['Sacramento', 'Fremont'],
                            'Illinois': ['Springfield', 'Chicago']
                        }

我刚刚添加了您提到的代码，并在代码中添加了一行：<div>{{states}}</div>. 如果你运行代码并选择国家，你可以看到行为。我只是为国家解释，你可以从相同的解释中理解州和城市，因为它们是相似的。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app>
    <head>
        <title>Cascading Dropdowns in AngularJs :devzone.co.in </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script>
            function CountryCntrl($scope) {
                $scope.countries = {
                    'India': {
                        'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                        'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                        'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                    },
                    'USA': {
                        'Alabama': ['Montgomery', 'Birmingham'],
                        'California': ['Sacramento', 'Fremont'],
                        'Illinois': ['Springfield', 'Chicago']
                    },
                    'Australia': {
                        'New South Wales': ['Sydney'],
                        'Victoria': ['Melbourne']
                    }
                };
            }
        </script>
    </head>
    <body>
 
        <div ng-controller="CountryCntrl">
            <div>
                Country: 
                <select id="country" ng-model="states" ng-options="country for (country, states) in countries">
                    <option value=''>Select</option>
                </select>
                <div>{{states}}</div>
            </div>
            <div>
                States: <select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states"><option value=''>Select</option></select>
            </div>
            <div>
                City: <select id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities"><option value=''>Select</option></select>        
            </div>
        </div>
 
    </body>
</html>

希望它能解决你的问题。

于 2018-02-05T02:50:37.717 回答