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的插件。

 

转载于:https://www.cnblogs.com/mamimi/p/9820014.html