Question

我试图根据我附加的以下链接找到基于国家，州，城市的级联下拉，并且我使用数组和ng-option＆＃与ng-options的正则表达式混淆39;带键值对。

我尝试了几个来自在线的例子，以了解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 !..

Answer 1

为了解释你的问题，请先查看变量：$ 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 =“国家（国家/地区）国家/地区” 国家是对象的关键，状态是价值，因此您将看到国家/地区列表，您可以在组合中从键（“印度”，“美国”，“澳大利亚”）中选择字符串。如果您选择“印度”，那么请关注以下对象：

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

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

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

                        {
                            '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>

希望它能解决你的问题。

带键值的ng-options表达式

1 个答案: