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 相关文章推荐
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
Angular的MVC和作用域
Dec 26 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 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
收音机的保养
2021/03/01 无线电
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Django中Middleware中的函数详解
2019/07/18 Python
Django的Modelforms用法简介
2019/07/27 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
如何利用cmp命令比较文件
2016/04/11 面试题
《一件运动衫》教学反思
2014/02/19 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
职业女性的职业规划
2014/03/04 职场文书
安全生产责任书
2014/03/12 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
在pyCharm中下载第三方库的方法
2021/04/18 Python
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
springboot中的pom文件 project报错问题
2022/01/18 Java/Android