Angularjs material 实现搜索框功能

前端之家收集整理的这篇文章主要介绍了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 样式:

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.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,delay:800,emptyText:"请输入:商家名称,账号,电话 等内容以进行搜索.",onSearch: function(){ return function(v){ $scope.merData.query(v); //调用本控制器的数据查询接口. } } });

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

原文链接:https://www.f2er.com/js/49772.html

猜你在找的JavaScript相关文章