Angularjs material implements the search box function, angularjsmaterial

Angularjs material implements the search box function, angularjsmaterial

Angular-material is a sub-project of AngularJS and is used to provide components that implement the Material Design style.

Material provides a large number of android-style UI components. Using angularjs + Material, you can easily develop a web interface with a style close to that of native Android 5.x. However, the actual use process does not always meet our needs. Developing a component becomes something we must learn.

The following is the implementation of a component:

// Some code 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.5, 0 ); "></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: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; } }

With ng-route, you can easily implement a refreshing APP to bring your web pages closer to the app experience,
In maincontroll, the message box is reset by listening to the ng-route page to jump to the event,

// 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 ');});

To use the search function, you only need to use the following code in the controller:

// Use $ scope in the search box. $ emit ('search. config ', {show: true, key: '', delay: 800, emptyText:" Enter the seller name, account, phone number, and other content for search. ", onSearch: function () {return function (v) {$ scope. merData. query (v); // call the data query interface of this controller .}}});

The above is a small series of Angularjs material Implementation of the search box function, I hope to help you!