Angularjs material implements the search box function _angularjs

Source: Internet
Author: User


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!


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.