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:'\
\
CSS 样式:
ShopNC多用户商城
下载
ShopNC多用户商城，全新的框架体系，呈现给您不同于以往的操作模式，更简约的界面，更流畅的搜索机制，更具人性化的管理后台操作，更适应现在网络的运营模式解决方案，为您的创业之路打下了坚实的基础，你们的需求就是我们的动力。我们在原有的C-C模式的基础上更增添了时下最流行的团购频道，进一步的为您提高用户的活跃度以及黏性提供帮助。ShopNC商城系统V2.4版本新增功能及修改功能如下：微商城频道A、商城
.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 实现搜索框功能，希望对大家有所帮助！
