Angularjs material 实现搜索框功能
angular-material是AngularJS的一个子项目，用来提供实现了MaterialDesign风格的组件。
Material提供了大量的android风格的UI组件，使用angularjs+Material可以很容易开发出风格接近原生Android5.x的web界面。但在实际使用的过程中并不总是能满足我们的需求。开发一个组件就成了我们必须学习的内容。
下面是一个组件的实现:
//前面省略若干代码
directive('mdSearchInput',[function(){
return{
restrict:'E',
controller:['$scope','$timeout',function($scope,$timeout){
vartsk=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(){
vartsk=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:'<divclass="md-search-input"layout="row">\
<inputtype="text"flexautocomplete="off"ng-model="searchText"name="{{inputName}}"placeholder="{{placeholder}}"ng-change="on_changed()"/>\
<md-buttonclass="md-fab"ng-click="on_clear()"ng-show="searchText!==\'\'"><md-iconmd-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:00;border-radius:5px;background:#FFF;margin:0px;position:relative;
input{outline:0;font-size:14px;width:100%;padding:015px;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(){
returnfunction(v){
$scope.merData.query(v);//调用本控制器的数据查询接口.
}
}
});
以上所述是小编给大家介绍的Angularjsmaterial实现搜索框功能，希望对大家有所帮助！