javascript - 三级联动select

Question

请问如何使用数据双向绑定的思路实现？

Answer 1

以城市的三级级联下拉菜单为例

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

这貌似跟双向绑定没多大关系吧。
主要就是数据格式配置好那就好办了

Answer 3

第一级为数组，第二级是以第一级的id为key值的对象，第三级是以第二级的id为key值的对象。

Answer 4

雷雷

Answer 5

请各位大大描述下思路就行