Angularjs material 实现搜索框功能  更新时间:2016年03月08日 09:13:59   作者:bywayboy   这篇文章主要介绍了Angularjs material 实现搜索框功能的相关资料,需要的朋友可以参考下 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:’\ \ \ ‘, 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 实现搜索框功能,希望对大家有所帮助! 您可能感兴趣的文章: Angular实现跨域(搜索框的下拉列表) Angular实现搜索框及价格上下限功能 Angularjs实现搜索关键字高亮显示效果 在 Angular 中实现搜索关键字高亮示例 angularjs实现搜索的关键字在正文中高亮出来 angularjs实现分页和搜索功能 Angularjs过滤器实现动态搜索与排序功能示例 angularJs使用$watch和$filter过滤器制作搜索筛选实例 Angular封装搜索框组件操作示例 angularjs material 搜索 相关文章 详解使用angularjs的ng-options时如何设置默认值(初始值) 本篇文章主要介绍了详解使用angularjs的ng-options时如何设置默认值(初始值),具有一定的参考价值,有兴趣的可以了解一下 2017-07-07 Angular2自定义分页组件 本篇文章主要介绍了Angular2自定义分页组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧 2017-04-04 详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0 本篇文章主要介绍了详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0,具有一定的参考价值,有兴趣的可以了解一下 2017-05-05 AngularJS读取JSON及XML文件的方法示例 这篇文章主要介绍了AngularJS读取JSON及XML文件的方法,涉及AngularJS针对xml及json格式文件数据的读取、遍历、输出等相关操作技巧,需要的朋友可以参考下 2017-05-05 AngularJS使用ui-route实现多层嵌套路由的示例 这篇文章主要介绍了AngularJS使用ui-route实现多层嵌套路由的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 Angualrjs和bootstrap相结合实现数据表格table 这篇文章主要介绍了Angualrjs和bootstrap相结合实现数据表格table,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-03-03 AngularJS中isolate scope的用法分析 这篇文章主要介绍了AngularJS中isolate scope的用法,结合实例形式分析了isolate scope的几种具体使用方式,需要的朋友可以参考下 2016-11-11 Angular 中使用 FineReport不显示报表直接打印预览 这篇文章主要介绍了Angular 中使用 FineReport不显示报表直接打印预览,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-08-08 Angular2入门–架构总览 本文主要介绍了Angular2的架构的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧 2017-03-03 详解ng-alain动态表单SF表单项设置必填和正则校验 这篇文章主要介绍了详解ng-alain动态表单SF表单项设置必填和正则校验,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2019-06-06 最新评论

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 实现搜索框功能,希望对大家有所帮助!

您可能感兴趣的文章:

  • Angular实现跨域(搜索框的下拉列表)
  • Angular实现搜索框及价格上下限功能
  • Angularjs实现搜索关键字高亮显示效果
  • 在 Angular 中实现搜索关键字高亮示例
  • angularjs实现搜索的关键字在正文中高亮出来
  • angularjs实现分页和搜索功能
  • Angularjs过滤器实现动态搜索与排序功能示例
  • angularJs使用$watch和$filter过滤器制作搜索筛选实例
  • Angular封装搜索框组件操作示例
张贴在3