Angularjs material implements the search box function _angularjs

Angular-material is a ANGULARJS project that provides components to implement the material design style.

Material offers a large number of Android-style UI components, and using Angularjs + Material makes it easy to develop a web interface with a style close to the native Android 5.x. But in the actual use of the process is not always able to meet our needs. Developing a component is what we have to learn.

The following is the implementation of a component:

//Omit some code before
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);} / / remove the previous task
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 Style:

. 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:tr ansparent;} 
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 
} 
}

With Ng-route it's easy to implement a no-refresh app to get your Web pages closer to the app experience,
In Maincontroll, you reset the message box by listening to the Ng-route page that is about to jump events.

Reset the search box before the page changes. 
$scope. $on (' Searchtext.reset ', function () {$scope. Searchconfig={show:false, Key: ", delay:1200};}); 
$rootScope. $on (' $routeChangeStart ', function (event, next) { 
$rootScope. $broadcast (' Searchtext.reset '); 
});

Where the search function is needed, you only need to implement it in the controller with the following code:

Accompany Value search box for your own 
$scope. $emit (' Search.config ', { 
show:true, key: ', delay:800, 
emptytext: "Please enter: Merchant name, account number, telephone And so on to search. ", 
onsearch:function () {return 
function (v) { 
$scope. Merdata.query (v);//Call the data query interface for this controller. 
} 
} 
});

The above is a small series to introduce the ANGULARJS material to realize the search box function, I hope to help!