table样式的下拉框（angularjs）

前言

虽然使用的技术比较老了，可是思想却仍是适用于如今的vue等框架。

一：实现的样式

 

二：实现包括的功能点

1：下拉框内容是表格，相似于一个弹窗

• 表格内容最多六行，超出的显示滚动条，表头固定，可滚动。
• 支持键盘上下键，进行当前项的选择
• 支持键盘的enter选择键，并支持回调函数，进行页面的数据绑定
• 支持加载后台数据
• 支持绑定指令的input框对数据的搜索功能
• 支持input框填写的内容的校验，若是内容是手写的，则清空，必须是从选择框内选择的（点击选择或者enter选择）等功能
• 支持后台无数据时，显示无加载内容。
• 在请求后台时，在当前下拉框添加加载等待动画。

2：下拉内容是常见的select框形式

• 内容与表格基本一致
• 存在即有使用的地方，可根据本身的须要决定是否使用。

功能点总结：其实与原生的select下拉框形式同样，只不过是进行了一次封装，添加了与后台交互的逻辑。没办法，全部的实现都是由于需求的存在，说激进点，若是不是产品想出这个需求，我也不会去作。添加一句：万恶的产品。

三：实现的逻辑

封装一个angularjs的指令，经过传参将指令须要用到的数据从父层传到子层。指令控制如何展现与一些交互。父子只有数据的传输，没有操做上的控制。

首先，咱们知道angularjs指令能够获取到父元素的方法，双向绑定的数据，常量字符串等。

1. 对当前input框进行指令绑定，进行父子级的通讯，传参大概包括：数据请求函数，渲染的类型（table select data city等，只要有数据，再进行页面UI修改便可），下拉弹窗的大小值指定，没有数据时下拉框显示的新建按钮名称与绑定的事件，当前input上绑定的model（用来作清空input）

2. 当所须要的传参数据所有都有时，须要对下拉弹窗里的内容进行事件绑定，包括：input的focus调用后台接口，blur进行input的清空（填写的数据不符合要求时），上下键对当前渲染的项进行选择，enter键触发数据绑定。
3. 根据数据进行渲染弹窗类型，使用ng-if进行弹窗内容的UI显示。好比ng-if==table ng-if==select 进行弹窗渲染。

四：实现的代码思想分析：

1. angularjs的指令进行父子通讯时，须要注意的就是scope的取值，传函数表达式时，scope = ‘&’ ，传model时 scope = ‘=’ ，传固定值时 scope='@' 
2. 一些函数写在父级ctr里，好比请求后台的函数。由于不一样的页面须要，可能数据返回成功后有不一样的操做，因此这个很差封装在指令里，须要保持指令的活性，若是你不想将请求后台的数据放在父controller里，也能够将请求地址传给指令，这样就能够在指令（子层）进行请求。
3. table渲染时，也是封装了一个指令，这样以后在须要用到这个table指令时，能够较好较快的抽出使用

五：重点分析下拉框的table实现

　　本文只去进行table的实现，这样用户能够本身进行扩展。

1. 指令html
2. 父级ctroller
3. 指令js

 

六：后续扩展与补充

1. 若是在进行后台数据交互时，只针对当前input框内的model进行操做，能够将后台接口传到指令里，在指令里进行数据的交互，这样就彻底脱离父级，成为一个独立的指令，至关于一个angularjs的插件。