具有鍵值的ng-options表達式

Question

我試圖根據從以下鏈接中找到的國家，州，城市來實現級聯下拉列表，並且我將使用數組和ng-options與鍵值對的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 !..

Answer 1

為了解釋您的問題，請首先查看變量：$ scope.countries，它是一個具有（鍵，值）對的對象。

$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 =“國家（國家中的國家/地區）”國家/地區是對象的鍵，國家/地區是值，因此您將看到國家/地區列表，並且可以從鍵（“印度”，“ USA'，'Australia'）組合。 並且，如果您選擇“印度”，則以下對象：

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

將被保存為您的狀態源中的范圍變量，因為您使用代碼ng-model =“ statessource”。

並且，如果選擇“美國”，則以下對象將存儲在“ 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>

希望它能解決您的問題。

具有鍵值的ng-options表達式

問題描述

1 個解決方案

解決方案1
0 2018-02-05 02:50:37

具有鍵值的ng-options表達式

問題描述

1 個解決方案

解決方案1 0 2018-02-05 02:50:37

解決方案1
0 2018-02-05 02:50:37