Maison > interface Web > js tutoriel > Le matériel Angularjs implémente la fonction de champ de recherche_AngularJS

Le matériel Angularjs implémente la fonction de champ de recherche_AngularJS

WBOY
Libérer: 2016-05-16 15:11:41
original
2027 Les gens l'ont consulté

angular-material est un sous-projet d'AngularJS, utilisé pour fournir des composants qui implémentent le style Material Design.

Material fournit un grand nombre de composants d'interface utilisateur de style Android. En utilisant angulairejs + Material, vous pouvez facilement développer une interface Web avec un style proche d'Android 5.x natif. Mais en pratique, il ne répond pas toujours à nos besoins. Développer un composant devient quelque chose que nous devons apprendre.

Ce qui suit est l'implémentation d'un composant :

//前面省略若干代码 
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){ 
} 
}; 
}]);
Copier après la connexion

Style 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; 
} 
}
Copier après la connexion

Avec ng-route, vous pouvez facilement implémenter une application sans actualisation, rendant votre page Web plus proche de l'expérience de l'application,
Dans maincontroll, réinitialisez la boîte de message en écoutant l'événement de saut de page de ng-route,

//在页面改变之前,重置搜索框. 
$scope.$on('SearchText.Reset',function(){ $scope.searchConfig={show:false, key:'',delay:1200};}); 
$rootScope.$on('$routeChangeStart', function (event, next) { 
$rootScope.$broadcast('SearchText.Reset'); 
});
Copier après la connexion

Lorsque la fonction de recherche doit être utilisée, elle doit uniquement être implémentée via le code suivant dans le contrôleur :

//陪值搜索框为己用 
$scope.$emit('Search.Config',{ 
show:true, key:'',delay:800, 
emptyText:"请输入:商家名称,账号,电话 等内容以进行搜索.", 
onSearch: function(){ 
return function(v){ 
$scope.merData.query(v); //调用本控制器的数据查询接口. 
} 
} 
});
Copier après la connexion

Ce qui précède est le matériel Angularjs introduit par l'éditeur pour implémenter la fonction de champ de recherche. J'espère qu'il sera utile à tout le monde !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal