带有角js的级联下拉列表

Cascading dropdown with angular js

本文关键字：级联下拉列表 js 更新时间：2023-09-26

我正在尝试使用angular js和嵌套json创建级联下拉列表。

这是我的json:

'ListItems':[ {
               'CountryName':'India',
                  'states': [{
                     'stateName':'Maharashtra',
                         'cities': 
                           [{'cityName':'Pune'}, 
                            {'cityName':'Mumbai'}, 
                            {'cityName':'Nagpur'},
                            {'cityName': 'Akola'}
                           ]},
                       {
                     'stateName':'Madhya Pradesh',
                         'cities': 
                           [{'cityName':'Indore'}, 
                            {'cityName':'Bhopal'}, 
                            {'cityName':'Jabalpur'}
                           ]} 
                      ]},
                 {
               'CountryName':'USA',
                  'states': [{
                     'stateName':'Alabama',
                         'cities': 
                           [{'cityName':'Montgomery'}, 
                            {'cityName':'Birmingham'}
                           ]},
                       {
                     'stateName':'California',
                         'cities': 
                           [{'cityName':'Los-Angeles'}, 
                            {'cityName':'San-Francisco'}
                           ]} 
                      ]}

有两个国家。每个国家包括州，每个州包括城市。

使用ng repeat解析元素

    <ul>
      <li ng-repeat="item in ListItems">
        {{item}}
        <ul>
            <li ng-repeat="state in item" >{{state.stateName}}</li>
            ... etc
         </ul>
      </li>
   </ul>