利用Angular select实现多级联动

Jan 13, 2016 | Angular

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

$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,用来过滤出子级数据，如下所示:

$scope.filter('toSubTypeArray', function() {
  return function(input, mainType) {
    return input[mainType];
  };

});

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

<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中更新子列表来实现，这里就不再实现了！

Angular select-cascding