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

原创 2018年04月14日 23:21:38

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;
                            }
                        }
                }
            }]
        }
    }])
})
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kingbox000/article/details/79945561

【Angular】——无限级下拉列表框

前言   前段时间换了新框架,将前后端分离,对Angular2有点感兴趣,所以参与一起封装组件。在小5的帮助下,学会了 好多东西,这里总结下封装的无限级下拉列表框。  dropdownli...
  • u011626283
  • u011626283
  • 2017-06-04 19:34:56
  • 566

基于angularjs的嵌套指令实现无限级下拉树菜单

由于项目中会大量用到无限级下拉树,为此找了很多基于jquery的tree的插件,但都不能很好的兼容angularjs,费了一番功夫之后,终于用angularjs的嵌套指令完成了这个功能,起初对于代码还...
  • weixin_38707512
  • weixin_38707512
  • 2018-01-31 10:27:22
  • 60

Verilog的数据流、行为、结构化与RTL级描述

Verilog语言可以有多种方式来描述硬件,同时,使用这些描述方式,又可以在多个抽象层次上设计硬件,这是Verilog语言的重要特征。   在Verilog语言中,有以下3种最基本的描述...
  • a8039974
  • a8039974
  • 2015-02-08 09:54:52
  • 2997

.net mvc DropDownList 下拉框_无限级分类

1、数据库设计: id:int  name:string pid:int  //父级id(顶级菜单默认为0) 2、Controller: using System; using System.Coll...
  • yan309271291
  • yan309271291
  • 2014-12-27 16:26:05
  • 1907

结构+样式+行为是思想

主要是div来布局,css做样式,javascript做行为的体现。
  • ynw1990
  • ynw1990
  • 2016-09-04 17:33:54
  • 401

我的js无限级下拉列表级联插件

我的js无限级下拉列表级联插件插件介绍js独立插件,无限级下拉列表实现,提供数据缓存,不依赖jq。 使用简单,自定义列表渲染方式,自定义数据获取方法。效果展示使用说明 提供了对来自服务器的数据进行缓...
  • cxgasd
  • cxgasd
  • 2017-11-06 22:38:15
  • 195

verilog行为级描述与结构级描述

1、在使用verilog描述电路时,既可以进行行为级的描述,也可以进行结构级的描述。       ①行为级描述:侧重对模块行为功能的抽象描述。       ②结构级描述:侧重对模块内部结构...
  • women2571
  • women2571
  • 2018-01-09 14:37:11
  • 54

php+ajax+无限级分类(下拉菜单形式)

  • 2009年07月28日 13:12
  • 3KB
  • 下载

结构-行为-样式-angularJs

用AngularJs开发项目前端; 指令的调用; 动态绑定数据; 分布插件的使用; 用到的Js script src="/home/public2/js/jquery-1.10.2.mi...
  • kingbox000
  • kingbox000
  • 2016-03-16 15:52:44
  • 365

关于无限级理解,及其树形结构

首先在表中含有parent_id字段 树级菜单的顶层parent_id=0 那么如何根据顶层菜单查找它所属的子级菜单呢? 思路如下 : 首先找到parent_id=0的记录(可以有多条,意味的...
  • qq_30259339
  • qq_30259339
  • 2016-04-03 11:29:29
  • 1586
收藏助手
不良信息举报
您举报文章:结构-行为-样式 - angularJs 指令实现无限级下拉列表
举报原因:
原因补充:

(最多只允许输入30个字)