Angularjs material 实现搜索框功能


Posted in Javascript onMarch 08, 2016

angular-material 是 AngularJS 的一个子项目,用来提供实现了 Material Design 风格的组件。

Material 提供了大量的android 风格的UI组件,使用 angularjs + Material 可以很容易开发出风格接近原生 Android 5.x 的web界面。但在实际使用的过程中并不总是能满足我们的需求。开发一个组件就成了我们必须学习的内容。

下面是一个组件的实现:

//前面省略若干代码 
directive('mdSearchInput',[function(){ 
return{ 
restrict:'E', 
controller:['$scope','$timeout',function($scope,$timeout){ 
var tsk=null; 
$scope.delay=1000; 
$scope.on_changed=function(){ 
if(null !== tsk) {$timeout.cancel(tsk);} //去掉前一个任务 
tsk = $timeout(function(){ 
$timeout.cancel(tsk);tsk=null; 
$scope.onSearch()($scope.searchText); 
},$scope.delay); 
};$scope.on_clear=function(){ 
var tsk=null;$scope.searchText=''; 
tsk=$timeout(function(){ 
$timeout.cancel(tsk);tsk=null; 
$scope.onSearch()($scope.searchText); 
},100); 
} 
}], 
scope:{ 
inputName: '@mdInputName', 
searchText: '=?mdSearchText', 
onSearch: '&?mdSearch', 
placeholder: '@placeholder', 
delay: '@delay' 
}, 
template:'<div class="md-search-input" layout="row">\ 
<input type="text" flex autocomplete="off" ng-model="searchText" name="{{inputName}}" placeholder="{{placeholder}}" ng-change="on_changed()" />\ 
<md-button class="md-fab" ng-click="on_clear()" ng-show="searchText!==\'\'"><md-icon md-svg-icon="md-close" style="color:rgba(0,0,0,0.5);"></md-icon></md-button>\ 
</div>', 
link:function($scope, $element){ 
} 
}; 
}]);

CSS 样式:

.md-search-input{ 
box-sizing: border-box;border: none;box-shadow: none;background: 0 0; border-radius:5px;background: #FFF;margin:0px;position: relative; 
input{outline: 0;font-size: 14px; width: 100%; padding: 0 15px; line-height: 40px;height: 40px;border: none;background:transparent;} 
button,.md-fab,.md-button,button:hover,.md-fab:hover { 
background:transparent !important; 
line-height:40px;height:40px;width:40px;font-size:14px;box-shadow:none !important;margin:0px;padding:0px; 
color:rgba(0,0,0,0.5) !important; 
} 
}

配合 ng-route 可以很容易实现无刷新的APP 让您的web页面更加接近app体验,
在 maincontroll中,通过监听 ng-route 的页面即将跳转事件 来重置消息框,

//在页面改变之前,重置搜索框. 
$scope.$on('SearchText.Reset',function(){ $scope.searchConfig={show:false, key:'',delay:1200};}); 
$rootScope.$on('$routeChangeStart', function (event, next) { 
$rootScope.$broadcast('SearchText.Reset'); 
});

而在需要用到搜索功能的地方,则只需要在控制器里通过如下代码实现:

//陪值搜索框为己用 
$scope.$emit('Search.Config',{ 
show:true, key:'',delay:800, 
emptyText:"请输入:商家名称,账号,电话 等内容以进行搜索.", 
onSearch: function(){ 
return function(v){ 
$scope.merData.query(v); //调用本控制器的数据查询接口. 
} 
} 
});

以上所述是小编给大家介绍的Angularjs material 实现搜索框功能,希望对大家有所帮助!

Javascript 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 #Javascript
三种Node.js写文件的方式
Mar 08 #Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 #Javascript
理解javascript正则表达式
Mar 08 #Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 #Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 #Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 #Javascript
You might like
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
用函数读出数据表内容放入二维数组
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
Python函数学习笔记
2008/10/07 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
Python爬虫开发与项目实战
2020/12/16 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
义诊活动总结
2015/02/04 职场文书
教师个人师德总结
2015/02/06 职场文书
慰问信格式规范
2015/03/23 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
nginx请求限制配置方法
2021/07/09 Servers
Django框架中模型的用法
2022/06/10 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python