angularjs material 实现搜索框
Posted bywayboy
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs material 实现搜索框相关的知识,希望对你有一定的参考价值。
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;
inputoutline: 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); //调用本控制器的数据查询接口.
);
调用实例:
<md-search-input flex ng-show="schCfg.show" md-search-text="schCfg.key" md-input-name="key" md-search="schCfg.onSearch()" placeholder="schCfg.placeholder" delay="schCfg.delay"></md-search-input>
效果
以上是关于angularjs material 实现搜索框的主要内容,如果未能解决你的问题,请参考以下文章
AngularJS Material Design 没有 Animations 支持,如何实现?
AngularJS Material Datepicker 更改格式