angular下拉框模糊查询


前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。

写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了。


1普通方式实现


  
  
  
  
     
     
     
     
  
  

angular输入选择框

逻辑实现步骤

1文本框做输入,并监控器change事件,在change事件中获取输入值,获取的输入值与选择框中的各个下拉项进行比较

2如果包含则只显示包含的部分,不包含则显示全部





指令方式实现


  
  
  
  
     
     
     
     
  
  

angular输入选择框 自定义指令方式

逻辑实现步骤

1文本框做输入,并监控器change事件,在change事件中获取输入值,获取的输入值与选择框中的各个下拉项进行比较

2如果包含则只显示包含的部分,不包含则显示全部


最终效果如下:

angular下拉框模糊查询_第1张图片

注意这里对select标签设置了multiple属性,所以在页面上input标签能覆盖select标签


如果不用multiple属性,需自行用div模拟实现select标签效果



你可能感兴趣的:(angular.js)