這篇文章主要介紹了Angularjs material 實(shí)現(xiàn)搜索框功能的相關(guān)資料,需要的朋友可以參考下

angular-material 是 AngularJS 的一個(gè)子項(xiàng)目，用來(lái)提供實(shí)現(xiàn)了 Material Design 風(fēng)格的組件。

Material 提供了大量的android 風(fēng)格的UI組件，使用 angularjs + Material 可以很容易開發(fā)出風(fēng)格接近原生 Android 5.x 的web界面。但在實(shí)際使用的過(guò)程中并不總是能滿足我們的需求。開發(fā)一個(gè)組件就成了我們必須學(xué)習(xí)的內(nèi)容。

下面是一個(gè)組件的實(shí)現(xiàn):

//前面省略若干代碼

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);} //去掉前一個(gè)任務(wù)

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;

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;

}

}

配合 ng-route 可以很容易實(shí)現(xiàn)無(wú)刷新的APP 讓您的web頁(yè)面更加接近app體驗(yàn)

在 maincontroll中，通過(guò)監(jiān)聽 ng-route 的頁(yè)面即將跳轉(zhuǎn)事件 來(lái)重置消息框

//在頁(yè)面改變之前,重置搜索框.

$scope.$on('SearchText.Reset',function(){ $scope.searchConfig={show:false, key:'',delay:1200};});

$rootScope.$on('$routeChangeStart', function (event, next) {

$rootScope.$broadcast('SearchText.Reset');

});

而在需要用到搜索功能的地方，則只需要在控制器里通過(guò)如下代碼實(shí)現(xiàn)：

//陪值搜索框?yàn)榧河?/P>

$scope.$emit('Search.Config',{

show:true, key:'',delay:800,

emptyText:"請(qǐng)輸入:商家名稱,賬號(hào),電話 等內(nèi)容以進(jìn)行搜索.",

onSearch: function(){

return function(v){

$scope.merData.query(v); //調(diào)用本控制器的數(shù)據(jù)查詢接口.

}

}

});

以上所述是小編給大家介紹的Angularjs material 實(shí)現(xiàn)搜索框功能，希望對(duì)大家有所幫助！