AngularJS-Material implementiert die Suchfeldfunktion_AngularJS

angular-material ist ein Unterprojekt von AngularJS, das zur Bereitstellung von Komponenten verwendet wird, die den Materialdesign-Stil implementieren.

Material bietet eine große Anzahl von UI-Komponenten im Android-Stil. Mit AngularJS + Material können Sie ganz einfach eine Weboberfläche mit einem Stil entwickeln, der dem nativen Android 5.x ähnelt. Aber im tatsächlichen Gebrauch entspricht es nicht immer unseren Bedürfnissen. Die Entwicklung einer Komponente wird zu etwas, das wir lernen müssen.

Das Folgende ist die Implementierung einer Komponente:

//前面省略若干代码 
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-Stil:

.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; 
} 
}

Mit ng-route können Sie ganz einfach eine aktualisierungsfreie APP implementieren und so Ihre Webseite dem App-Erlebnis näher bringen,
Setzen Sie in maincontroll das Meldungsfeld zurück, indem Sie das Seitensprungereignis von ng-route abhören,

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

Wo immer Sie die Suchfunktion verwenden müssen, müssen Sie sie nur über den folgenden Code im Controller implementieren:

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

Das Obige ist das vom Herausgeber eingeführte Angularjs-Material, um die Suchfeldfunktion zu implementieren. Ich hoffe, es wird für alle hilfreich sein!