Angular中的select标签提供了很好的下拉选项,利用多个select就可以实现多级联动了,直接看例子。
首先需要定义好数据,这里我使用的是一个JS的Object对象,propertyName是父级选择,propertyValue是子级选择,这里只有两层,也可以再往下嵌套到三层等,如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$scope.lineTypes = {
'A 自然景观线路': [
'AA 山路',
'AB 水路',
'AC 峡谷',
],
'B 购物线路': [
'BA 土特产',
'BB 工艺品',
'BC 日用品',
],
'C 美食线路': [
'CA 地方小吃街',
'CB 高档餐饮街',
'CC 酒吧街',
],
'D 历史文化线路': [
'DA 历史人物',
'DB 历史事件',
'DC 文学艺术',
'DD 美术',
],
'E 名俗风情线路': [
'EA 地方风俗与民间礼仪',
'EB 民间节庆',
'EC 民间演艺',
'ED 民间健身活动与赛事',
'EE 宗教活动',
'EF 庙会与民间集会',
'EG 饮食习俗',
'EH 特色服饰',
],

};

另外还需要定义一个filter,用来过滤出子级数据,如下所示:

1
2
3
4
5
6
$scope.filter('toSubTypeArray', function() {
return function(input, mainType) {
return input[mainType];
};

});

定义好数据就可以直接在网页上展示了,select的具体用法可以看官方文档,这里不细讲了,直接看例子。

1
2
3
4
5
6
<select class="form-control" style="width:200px;" ng-options="key as key for (key,value) in activityTypes" ng-model="selectedActivityMainType">
<option value="">---请选择大类---</option>
</select>
<select class="form-control" style="width:200px;" ng-options="type for type in activityTypes | toSubTypeArray:selectedActivityMainType track by type" ng-model="selectedActivitySubType">
<option value="">---请选择子类---</option>
</select>

注意,这里解释一下为什么数据定义成Object对象而不是Array对象,在第一个下拉中,我们把propertyName当作官方文档中介绍select和label,select就是选择的那个值,label就是界面上显示出来的值,这两个可以不是同一个值哦!定义成一个Object对象后,可以直接按照PropertyName取出子级的数组,比较方便!

效果如下:
第一级选择
第二级选择

这样就完成了多级联动的效果,目前存在的一个问题是如果使用filter过滤,测试中发现会多次触发,性能有所下降,当然也可以通过添加select的ng-change事件,在ng-change中更新子列表来实现,这里就不再实现了!