国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Take the three-level cascading drop-down menu of a city as an example

HTML

<p class="row">
  <p class="col-md-4">
    <select class="form-control" ng-model="vm.country" ng-options="country.label for country in vm.countries">
      <option value="">-- 請(qǐng)選擇國(guó)家 --</option>
    </select>
  </p>
  <p class="col-md-4" ng-if="vm.country.provinces">
    <select class="form-control" ng-model="vm.province"
            ng-options="province.label for province in vm.country.provinces">
      <option value="">-- 請(qǐng)選擇省份/州 --</option>
    </select>
  </p>
  <p class="col-md-4" ng-if="vm.province.cities">
    <select class="form-control" ng-model="vm.city" ng-options="city.label for city in vm.province.cities">
      <option value="">-- 請(qǐng)選擇城市/縣區(qū) --</option>
    </select>
  </p>
</p>
<p>您選擇的是：{{vm.country.label}} - {{vm.province.label}} - {{vm.city.label}}</p>
<p class="alert alert-info">
  這里使用ng-if指令來(lái)達(dá)到下一級(jí)有數(shù)據(jù)才顯示下一級(jí)的效果
</p>

js

angular.module('ngShowcaseApp').controller('ctrl.select.cascade', function ($scope, CityData) {
  var vm = $scope.vm = {};
  vm.countries = CityData;
  // 更換國(guó)家的時(shí)候清空省
  $scope.$watch('vm.country', function(country) {
    vm.province = null;
  });
  // 更換省的時(shí)候清空城市
  $scope.$watch('vm.province', function(province) {
    vm.city = null;
  });
});

city-data.js

angular.module('ngShowcaseApp').constant('CityData', [
  {
    label: '中國(guó)',
    flag: 'cn.png',
    provinces: [
      {
        label: '北京',
        cities: [
          {
            label: '朝陽(yáng)區(qū)'
          },
          {
            label: '宣武區(qū)'
          },
          {
            label: '海淀區(qū)'
          }
        ]
      },
      {
        label: '河北',
        cities: [
          {
            label: '石家莊'
          },
          {
            label: '承德'
          },
          {
            label: '唐山'
          }
        ]
      }
    ]
  },
  {
    label: '美國(guó)',
    flag: 'us.png',
    provinces: [
      {
        label: '紐約',
        cities: [
          {
            label: '曼哈頓區(qū)'
          },
          {
            label: '皇后區(qū)'
          }
        ]
      },
      {
        label: '德克薩斯州',
        cities: [
          {
            label: '休斯頓'
          },
          {
            label: '達(dá)拉斯'
          }
        ]
      },
      {
        label: '加利福尼亞州'
      }
    ]
  }
]);

This doesn’t seem to have much to do with two-way binding.
The main thing is that once the data format is configured, it will be easy

The first level is an array, the second level is an object with the first level id as the key value, and the third level is an object with the second level id as the key value.

{
    [
        'key':1
        'name':xxx
        'value':
        {
            [
                'key':1-1,
                'name':ooo,
                'value':[
                    'key':1-1-1,
                    'name':hehe,
                    'value':....
                ]
            ],
            [....],
            [....],
        }
        
    ],
    [...],
    [...]
}

Please describe your ideas