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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
js操作滚动条事件实例
Jan 29 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
Javascript模拟实现new原理解析
Mar 03 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
基于JS实现视频上传显示进度条
May 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python编码类型转换方法详解
2016/07/01 Python
python中的随机函数小结
2018/01/27 Python
用Eclipse写python程序
2018/02/10 Python
解决django FileFIELD的编码问题
2020/03/30 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
党的群众路线调研报告
2014/11/03 职场文书
小班教师个人总结
2015/02/05 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
java开发双人五子棋游戏
2022/05/06 Java/Android
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers