table样式的下拉框（angularjs）
前⾔
虽然使⽤的技术⽐较⽼了，但是思想却还是适⽤于现在的vue等框架。
⼀：实现的样式
⼆：实现包括的功能点
1：下拉框内容是表格，类似于⼀个弹窗
表格内容最多六⾏，超出的显⽰滚动条，表头固定，可滚动。
⽀持键盘上下键，进⾏当前项的选择
⽀持键盘的enter选择键，并⽀持回调函数，进⾏页⾯的数据绑定
⽀持加载后台数据
⽀持绑定指令的input框对数据的搜索功能
⽀持input框填写的内容的校验，如果内容是⼿写的，则清空，必须是从选择框内选择的（点击选择或者enter选择）等功能
⽀持后台⽆数据时，显⽰⽆加载内容。
在请求后台时，在当前下拉框添加加载等待动画。
2：下拉内容是常见的select框形式
内容与表格基本⼀致
存在即有使⽤的地⽅，可根据⾃⼰的需要决定是否使⽤。
功能点总结：其实与原⽣的select下拉框形式⼀样，只不过是进⾏了⼀次封装，添加了与后台交互的逻辑。没办法，所有的实现都是因为需求的存在，说激进点，如果不是产品想出这个需求，我也不会去做。添加⼀句：万恶的产品。
三：实现的逻辑
封装⼀个angularjs的指令，通过传参将指令需要⽤到的数据从⽗层传到⼦层。指令控制如何展⽰与⼀些交互。⽗⼦只有数据的传输，没有操作上的控制。
⾸先，我们知道angularjs指令可以获取到⽗元素的⽅法，双向绑定的数据，常量字符串等。
对当前input框进⾏指令绑定，进⾏⽗⼦级的通信，传参⼤概包括：数据请求函数，渲染的类型（table select data city等，只要有数据，再进⾏页⾯UI修改即可），下拉弹窗的⼤⼩值指定，没有数据时下拉框显⽰的新建按钮名称与绑定的事件，当前input上绑定的model（⽤来做清空input）
当所需要的传参数据全部都有时，需要对下拉弹窗⾥的内容进⾏事件绑定，包括：input的focus调⽤后台接⼝，blur进⾏input的清空（填写的数据不符合要求时），上下键对当前渲染的项进⾏选择，enter键触发数据绑定。
根据数据进⾏渲染弹窗类型，使⽤ng-if进⾏弹窗内容的UI显⽰。⽐如ng-if==table ng-if==select 进⾏弹窗渲染。
四：实现的代码思想分析：
angularjs的指令进⾏⽗⼦通信时，需要注意的就是scope的取值，传函数表达式时，scope = ‘&’ ，传model时 scope = ‘=’ ，传固定值时 scope='@'
⼀些函数写在⽗级ctr⾥，⽐如请求后台的函数。因为不同的页⾯需要，可能数据返回成功后有不同的操作，所以这个不好封装在指令⾥，需要保持指令的活性，如果你不想将请求后台的数据放在⽗contr
angular和angularjsoller⾥，也可以将请求地址传给指令，这样就可以在指令（⼦层）进⾏请求。
table渲染时，也是封装了⼀个指令，这样之后在需要⽤到这个table指令时，可以较好较快的抽出使⽤
五：重点分析下拉框的table实现
  本⽂只去进⾏table的实现，这样⽤户可以⾃⼰进⾏扩展。
指令html
⽗级ctroller
指令js
六：后续扩展与补充
如果在进⾏后台数据交互时，只针对当前input框内的model进⾏操作，可以将后台接⼝传到指令⾥，在指令⾥进⾏数据的交互，这样就完全脱离⽗级，成为⼀个独⽴的指令，相当于⼀个angularjs的插件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。