javascript - Three-level linkage select

Question

How to use the idea of ​​two-way data binding?

Answer 1

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="">-- 请选择国家 --</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="">-- 请选择省份/州 --</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="">-- 请选择城市/县区 --</option>
    </select>
  </p>
</p>
<p>您选择的是：{{vm.country.label}} - {{vm.province.label}} - {{vm.city.label}}</p>
<p class="alert alert-info">
  这里使用ng-if指令来达到下一级有数据才显示下一级的效果
</p>

js

angular.module('ngShowcaseApp').controller('ctrl.select.cascade', function ($scope, CityData) {
  var vm = $scope.vm = {};
  vm.countries = CityData;
  // 更换国家的时候清空省
  $scope.$watch('vm.country', function(country) {
    vm.province = null;
  });
  // 更换省的时候清空城市
  $scope.$watch('vm.province', function(province) {
    vm.city = null;
  });
});

city-data.js

angular.module('ngShowcaseApp').constant('CityData', [
  {
    label: '中国',
    flag: 'cn.png',
    provinces: [
      {
        label: '北京',
        cities: [
          {
            label: '朝阳区'
          },
          {
            label: '宣武区'
          },
          {
            label: '海淀区'
          }
        ]
      },
      {
        label: '河北',
        cities: [
          {
            label: '石家庄'
          },
          {
            label: '承德'
          },
          {
            label: '唐山'
          }
        ]
      }
    ]
  },
  {
    label: '美国',
    flag: 'us.png',
    provinces: [
      {
        label: '纽约',
        cities: [
          {
            label: '曼哈顿区'
          },
          {
            label: '皇后区'
          }
        ]
      },
      {
        label: '德克萨斯州',
        cities: [
          {
            label: '休斯顿'
          },
          {
            label: '达拉斯'
          }
        ]
      },
      {
        label: '加利福尼亚州'
      }
    ]
  }
]);

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

Please describe your ideas