结构-行为-样式 - angularJs 指令实现无限级下拉列表

A、数据格式：

[
{
"groupKey": "c1",
"name": "项目营销",
"selectHide": false,
"son": [
{
"groupKey": "c1t1",
"name": "项目一",
"selectHide": false,
"son": [
{
"groupKey": "c1t1d1",
"name": "项目一1",
"selectHide": false,
"son": [
{
"groupKey": "c1t1d11",
"name": "项目一11",
"selectHide": false,
"son": []
},
{
"groupKey": "c1t1d12",
"name": "项目一12",
"selectHide": false,
"son": []
}
]
},
{
"groupKey": "c1t1d2",
"name": "项目一2",
"selectHide": false,
"son": []
},
{
"groupKey": "c1t1d3",
"name": "项目一3",
"selectHide": false,
"son": []
}
]
},
{
"groupKey": "c1t2",
"name": "项目二",
"selectHide": false,
"son": []
},
{
"groupKey": "c1t3",
"name": "项目三",
"selectHide": false,
"son": []
}
]
}
]


B、页面格式：

<div multi-select skey="arr" collects="selectData"></div>

C、指令：

define(['angular'], function () {
    var commonDirectives = angular.module("commonDirectives", []);
    commonDirectives.directive("multiSelect", [function () {
        return {
            restrict: "AE"
            , scope: {
                collects: "=", //统一Select数据集合
                skey: "=" //当前值数组
            }
            , template: '<div ng-repeat="m in myobj" class="client-search-header-input">' + '<select ng-model="m.select" ng-hide="m.selectHide" ' + 'ng-change="selectChange($index)" class="set-select set-widthauto form-control ' + 'label-extract-select" ng-options="us.name for us in m.myfull">' + ' <option value="">请选择</option>' + '</select>' + '</div>'
            , link: function (scope, element, attrs) { //link是用来做dom绑定操作的
                scope.$watch('collects', function (ov, nv) {
                    if (ov == undefined || ov == "undefined") return;
                    //开始部门多级下拉赋值
                    var arr = scope.skey;
                    scope.j = 0, scope.myobj = [];
                    //递归
                    digui(scope.collects);

                    function digui(useList) {
                        var obj = {};
                        if (useList.length == 0) return;
                        //部门Key为空
                        if (!arr || arr.length == 1 && arr[0] == "") {
                            obj.select = "";
                            obj.myfull = useList;
                            obj.selectHide = false;
                            scope.myobj.push(obj);
                            return;
                            //部门Key不为空
                        }
                        else {
                            while (scope.j <= (arr.length - 1)) {
                                for (var i = 0; i < useList.length; i++) {
                                    if (useList[i].groupKey == arr[scope.j]) {
                                        obj.select = useList[i];
                                        obj.myfull = useList;
                                        obj.selectHide = false;
                                        scope.myobj.push(obj);
                                        scope.j++;
                                        digui(obj.select.son);
                                    }
                                }
                            }
                        }
                    }
                });
            }
            , controller: ["$scope", function (scope) { //controller一般都是用来放公用方法
                //重写下拉Change事件 i 是当前点击的索引值
                scope.selectChange = function (i) {
                        //当前点击不是最后一个
                        var s = scope.myobj[i].select;
                        if (s && s.child.length != 0) {
                            scope.myobj = scope.myobj.slice(0,i+1);
                            var obj = {};
                            obj.select = "";
                            obj.myfull = s.child;
                            obj.selectHide = false;
                            scope.myobj.push(obj);
                            //当前点击是最后一个
                        } else {
                            for (var n = i + 1; n < scope.myobj.length; n++) {
                                scope.myobj[n].selectHide = true;
                            }
                        }
                }
            }]
        }
    }])
})