首先可以看到一个标准的例子。http://showcase.ngnice.com/#/select/cascade。
我现在后台造json树数据,前台绑定没问题,非常简洁,相比对每级联监听省了大量代码并且只要一次ajax。
但现在的问题就是,给出第三级的数据,比如朝阳区。如何反向绑定出第二和第一级联的内容。
我现在的解决方式就是模拟顺序绑定,但缺点明显,需要提供一二三级联的内容。有没有一种方式可以只根据第三级联内容倒推全绑定数据。
<div class=“row”> <div 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> </div> <div 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> </div> <div 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> </div> </div> <div>您选择的是:{{vm.country.label}} - {{vm.province.label}} - {{vm.city.label}}</div> <div class=“alert alert-info”> 这里使用ng-if指令来达到下一级有数据才显示下一级的效果 </div>
网址有问题,点进去后选择下拉框控件中的级联即可。