angularjs 实现带查找筛选功能的select下拉框实例

前端之家收集整理的这篇文章主要介绍了angularjs 实现带查找筛选功能的select下拉框实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一.背景

对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的。都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题。

分析:

标签上新加一个属性 select-search就能支持查找的功能。如果这个属性没起作用,也不影响原来的select的功能。1.在selectSearch指令里,怎么获取到ng-options里的数据源,以及指定的value(option标签的value)和text(option标签里的text)字段名。

2.用什么方式来筛选?是每次显示匹配项,隐藏不匹配项还是毎次从数据源里匹配,重新生成结点。

1.参考angular自带指令ng-options来获取数据源和value,text字段名。

特别说明,仅支持ng-options="obj.value as obj.text for objin list"的普通形式,那些带分组的等等,暂不支持哈。

2.重新生成结点。(为什么这么选择,方便呀!)

二.具体实现

1.代码部分

1.1 js代码(请引先引入jquery,不然会报错)

功能的下拉框 * 使用方法

2.详细说明

程序中的关键点是parSEOptions函数,即前面分析里的问题1。parSEOptions是参考ng-options的源码实现的,原来是想返回一个对象,这个对象里包含了数据源,但是在调试时,发现post函数中该函数返回对象里的数据为空,watch不到,所以改为用scope.options来存数据。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章