結構-行爲-樣式 - 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;
                            }
                        }
                }
            }]
        }
    }])
})