Angularjs实现带查找筛选功能的select下拉框示例代码

前言

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

分析

我们的目标是在原来的function parseOptions(optionsExp,element,scope) { // ngOptions里的正则 var NG_OPTIONS_REGEXP = /^\s([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?(?:\s+disable\s+when\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w])|(?:(\s([\$\w][\$\w])\s,\s([\$\w][\$\w])\s)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;


 var match = optionsExp.match(NG_OPTIONS_REGEXP);
 if (!(match)) {
   console.log('ng-options 表达式有误')
 }
 var valueName = match[5] || match[7];
 var keyName = match[6];
 var displayFn = $parse(match[2]);
 var keyFn = $parse(match[1]);
 var valuesFn = $parse(match[8]);

 var labelArray = [],idArray = [],optionValues = [];
 scope.$watch(match[8],function(newValue,oldValue) {
   if (newValue && newValue.length > 0) {
     optionValues = valuesFn(scope) || [];
     labelArray = [];
     idArray = []
     for (var index = 0,l = optionValues.length; index < l; index++) {
       var it = optionValues[index];
       if (match[2] && match[1]) {
         var localIt = {};
         localIt[valueName] = it;
         var label = displayFn(scope,localIt);
         var dataId = keyFn(scope,localIt);
         labelArray.push(label);
         idArray.push(dataId);
       }
     }

     scope.options = {
       'optionValues': optionValues,'labelArray': labelArray,'idArray': idArray
     }
   }
 });
}

return {

restrict: 'A',require: ['ngModel'],priority: 100,replace: false,scope: true,template: '<div class="chose-container">' +

'<div class="chose-single"><span class="j-view"><i class="glyphicon glyphicon-remove">

Angularjs实现带查找筛选功能的select下拉框示例代码

前言

分析

使用及效果

详细说明

总结

猜你在找的JavaScript相关文章