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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
javascript中万恶的function实例分析
May 25 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
AngularJs 常用的过滤器
May 15 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
vue实现Input输入框模糊查询方法
Jan 29 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/04/09 欧美动漫
求PHP数组最大值,最小值的代码
2011/10/31 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
javascript中Object使用详解
2015/01/26 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
解析Python中的二进制位运算符
2015/05/13 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
python @property的用法及含义全面解析
2018/02/01 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
2015年学校团委工作总结
2015/05/26 职场文书
发票退票证明
2015/06/24 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server