利用Angular select实现多级联动
Angular中的select标签提供了很好的下拉选项,利用多个select就可以实现多级联动了,直接看例子。
首先需要定义好数据,这里我使用的是一个JS的Object对象,propertyName是父级选择,propertyValue是子级选择,这里只有两层,也可以再往下嵌套到三层等,如下所示。
1 | $scope.lineTypes = { |
另外还需要定义一个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中更新子列表来实现,这里就不再实现了!