84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
Wie lässt sich die Idee der bidirektionalen Datenbindung umsetzen?
以城市的三级级联下拉菜单为例
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: '加利福尼亚州' } ] } ]);
这貌似跟双向绑定没多大关系吧。主要就是数据格式配置好那就好办了
第一级为数组,第二级是以第一级的id为key值的对象,第三级是以第二级的id为key值的对象。
{ [ 'key':1 'name':xxx 'value': { [ 'key':1-1, 'name':ooo, 'value':[ 'key':1-1-1, 'name':hehe, 'value':.... ] ], [....], [....], } ], [...], [...] }
请各位大大描述下思路就行
以城市的三级级联下拉菜单为例
HTML
js
city-data.js
这貌似跟双向绑定没多大关系吧。
主要就是数据格式配置好那就好办了
第一级为数组,第二级是以第一级的id为key值的对象,第三级是以第二级的id为key值的对象。
请各位大大描述下思路就行