Angularjs 자료는 검색 상자 기능을 구현합니다_AngularJS

angular-material은 AngularJS의 하위 프로젝트로, 머티리얼 디자인 스타일을 구현하는 구성 요소를 제공하는 데 사용됩니다.

Material은 수많은 Android 스타일의 UI 구성 요소를 제공합니다.Angularjs + Material을 사용하면 기본 Android 5.x에 가까운 스타일의 웹 인터페이스를 쉽게 개발할 수 있습니다. 그러나 실제 사용에서는 항상 우리의 요구를 충족시키지는 않습니다. 컴포넌트를 개발하는 것은 우리가 배워야 할 것이 됩니다.

다음은 구성요소 구현입니다.

//前面省略若干代码 
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를 사용하면 새로 고침이 필요 없는 앱을 쉽게 구현하여 웹페이지를 앱 경험에 더 가깝게 만들 수 있습니다.
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 자료입니다. 모든 분들께 도움이 되었으면 좋겠습니다!