这里有新鲜出炉的 AngularJS 开发指南,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本篇文章主要介绍了 angularjs 实现带查找筛选功能的 select 下拉框实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
一. 背景
对于 select 的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的。都知道 jquery 里有这样的插件,但我们用的是 Angularjs, 更希望用双向绑定,指令的方式优雅地解决这个问题。
分析:
目标 | 在原来的 <select ng-options=""> 标签上新加一个属性 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 obj in list" 的普通形式,那些带分组的等等,暂不支持哈。 2. 重新生成结点。(为什么这么选择,方便呀!) |
二. 具体实现
1. 代码部分
1.1 js 代码 (请引先引入 jquery,不然会报错)
- /**
- * 带筛选功能的下拉框
- * 使用方法 <select ngc-select-search name="select1" ng-options="">
- * 说明[ select 一定要有name,ng-options 属性]
- */
- .directive('ngcSelectSearch',
- function($animate, $compile, $parse) {
- 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"></span><i class="glyphicon glyphicon-remove"></i></div>' + '<div class="chose-drop chose-hide j-drop">' + '<div class="chose-search">' + '<input class="j-key" type="text" autocomplete="off">' + '</div>' + '<ul class="chose-result">' +
- // '<li ng-repeat="'+repeatTempl+'" data-id="'+keyTempl+'" >{{'+ valueTempl+'}}</li>'+
- '</ul>' + '</div>' + '</div>',
- link: {
- pre: function selectSearchPreLink(scope, element, attr, ctrls) {
- var tmplNode = $(this.template).first();
- var modelName = attr.ngModel,
- name = attr.name ? attr.name: ('def' + Date.now());
- tmplNode.attr('id', name + '_chosecontianer');
- $animate.enter(tmplNode, element.parent(), element);
- },
- post: function selectSearchPostLink(scope, element, attr, ctrls) {
- var choseNode = element.next(); //$('#'+attr.name +'_chosecontianer');
- choseNode.addClass(attr.class);
- element.addClass('chose-hide');
- // 当前选中项
- var ngModelCtrl = ctrls[0];
- if (!ngModelCtrl || !attr.name) return;
- parseOptions(attr.ngOptions, element, scope);
- var rs = {};
- function setView() {
- var currentKey = ngModelCtrl.$modelValue;
- if (isNaN(currentKey) || !currentKey) {
- currentKey = '';
- choseNode.find('.j-view:first').text('请选择');
- choseNode.find('i').addClass('chose-hide');
- }
- if ((currentKey + '').length > 0) {
- for (var i = 0,
- l = rs.idArray.length; i < l; i++) {
- if (rs.idArray[i] == currentKey) {
- choseNode.find('.j-view:first').text(rs.labelArray[i]);
- choseNode.find('i').removeClass('chose-hide');
- break;
- }
- }
- }
- }
- function setViewAndData() {
- if (!scope.options) {
- return;
- }
- rs = scope.options;
- setView();
- }
- scope.$watchCollection('options', setViewAndData);
- scope.$watch(attr.ngModel, setView);
- function getListNodes(value) {
- var nodes = [];
- value = $.trim(value);
- for (var i = 0,
- l = rs.labelArray.length; i < l; i++) {
- if (rs.labelArray[i].indexOf(value) > -1) {
- nodes.push($('<li>').data('id', rs.idArray[i]).text(rs.labelArray[i]))
- }
- }
- return nodes;
- }
- choseNode.on('keyup', '.j-key',
- function() {
- // 搜索输入框keyup,重新筛选列表
- var value = $(this).val();
- choseNode.find('ul:first').empty().append(getListNodes(value));
- return false;
- }).on('click',
- function() {
- choseNode.find('.j-drop').removeClass('chose-hide');
- if (choseNode.find('.j-view:first').text() != '请选择') {
- choseNode.find('i').removeClass('chose-hide');
- }
- choseNode.find('ul:first').empty().append(getListNodes(choseNode.find('.j-key').val()));
- return false;
- }).on('click', 'ul>li',
- function() {
- var _this = $(this);
- ngModelCtrl.$setViewValue(_this.data('id'));
- ngModelCtrl.$render();
- choseNode.find('.j-drop').addClass('chose-hide');
- return false;
- }).on('click', 'i',
- function() {
- ngModelCtrl.$setViewValue('');
- ngModelCtrl.$render();
- choseNode.find('.j-view:first').text('请选择');
- return false;
- });
- $(document).on("click",
- function() {
- $('.j-drop').addClass('chose-hide');
- choseNode.find('i').addClass('chose-hide');
- return false;
- });
- }
- }
- };
- })
1.2 CSS 代码 (用 less 写的,以下是编译后的)
- .chose-hide {
- position: absolute!important;
- top: -999em !important;
- }
- .chose-container {
- border: none!important;
- float: left;
- margin-right: 40px;
- padding: 0!important;
- position: relative;
- }
- .chose-container .chose-single {
- padding: 6px 12px;
- color: #333;
- width: 100%;
- border: 1px solid #eee;
- display: inline-block;
- height: 30px;
- }
- .chose-container .chose-single::after {
- content: '';
- position: absolute;
- border-width: 6px 3px;
- border-style: solid;
- /* border-top-color: transparent; */
- border-left-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- right: 8px;
- top: 12px;
- }
- .chose-container .chose-single i {
- width: 12px;
- float: right;
- right: 8px;
- font-size: 12px;
- height: 12px;
- background-color: #eee;
- }
- .chose-container .chose-drop {
- width: 195px;
- position: absolute;
- border: 1px solid #eee;
- z-index: 1000;
- background-color: #fff;
- }
- .chose-container .chose-search input[type='text'] {
- margin: 0;
- padding-left: 12px;
- width: 100%;
- height: 30px;
- border: 1px solid #ccc;
- float: none;
- }
- .chose-container .chose-result {
- max-height: 370px;
- overflow-y: scroll;
- overflow-x: hidden;
- }
- .chose-container .chose-result li {
- padding: 5px 12px;
- list-style-type: none;
- }
- .chose-container .chose-result li:hover {
- background-color: #e1e2e7;
- }
1.3 使用及效果
- <select ngc-select-search class="common-select" ng-model="aa.b" ng-options="obj.countryId as obj.countryCnName for obj in vm.countries"
- name="country">
- <option value="">
- 请选择
- </option>
- </select>
2. 详细说明
程序中的关键点是 parseOptions 函数,即前面分析里的问题 1。parseOptions 是参考 ng-options 的源码实现的,原来是想返回一个对象,这个对象里包含了数据源,但是在调试时,发现 post 函数中该函数返回对象里的数据为空,watch 不到,所以改为用 scope.options 来存数据。
来源: http://www.phperz.com/article/17/0618/328633.html