Angularjs material 實現搜尋方塊功能_AngularJS

angular-material 是 AngularJS 的一個子項目，用來提供實現了 Material Design 風格的組件。

Material 提供了大量的android 風格的UI組件，使用 angularjs + Material 可以很容易開發出風格接近原生 Android 5.x 的web介面。但在實際使用的過程中並不總是能滿足我們的需求。開發一個組件就成了我們必須學習的內容。

下面是一個組件的實現:

//前面省略若干代碼 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);} //去掉前一個任務 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 可以很容易實現無重新整理的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(){ return function(v){ $scope.merData.query(v); //調用本控制器的資料查詢介面. } } });

以上所述是小編給大家介紹的Angularjs material 實現搜尋方塊功能，希望對大家有所協助！