Angular 에서 검색 키워드 하 이 라이트 예제 구현
그러나 어떤 경우 에는 검색 상자 가 있 습 니 다.검색 키 워드 를 본문 에서 밝 히 고 싶 을 때 힘 들 어 집 니 다.filter 는 이러한 상황 을 처리 하 는 데 도움 을 줄 수 있 습 니 다.
실제로 우리 의 데 이 터 는 DOM 에 직접 출력 할 수 없 는 경우 가 많 습 니 다.전형 적 인 날짜 나 화폐 등 은 보통 우리 내부 의 데 이 터 를 포맷 한 후에 페이지 에 출력 해 야 합 니 다.Angular 에서 이 작업 은 filter 를 통 해 실 현 된 것 입 니 다.
filter 는 module 등급 의 서비스 로 정 의 된 후에 전체 module 에서 직접 사용 할 수 있 고 매우 높 은 재 활용 성 을 가진다.
문 제 를 설명 하기 위해 먼저 돌 이 켜 본AngularJs(7)필터 들 어가 기(filter)필 터 를 설명 한 다음 검색 키워드 하 이 라 이 트 를 어떻게 처리 하 는 지 상세 하 게 설명 한다.사용자 정의 필터 부분 부터 시작 할 수 있 습 니 다.
1.필터 사용법
1.템 플 릿 에서 사용
{{}}에서 filter 를 직접 사용 할 수 있 습 니 다.표현 식 뒤에|로 나 눌 수 있 습 니 다.문법 은 다음 과 같 습 니 다.
{{ expression | filter }}
{{ expression | filter1 | filter2 | ... }}
{{ expression | filter:argument1:argument2:... }}
<span ng-repeat="a in array | filter ">우리 의 js 코드 에서 도 필 터 를 사용 할 수 있 습 니 다.방식 은 바로 우리 가 익숙 한 의존 주입 입 니 다.예 를 들 어 저 는 contrller 에서 currency 필 터 를 사용 하려 면 이 contrller 에 주입 하면 됩 니 다.
app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534);
}이때 당신 은 의심 이 있 을 수 있 습 니 다.만약 에 제 가 controller 에서 여러 개의 filter 를 사용 하려 면 하나씩 주입 해 야 합 니까?이것 은 너무 힘 들 지 않 습 니까?동생 조급해 하지 마 세 요~ng 은 필요 한 filter 를 호출 할 수 있 는$filter 서 비 스 를 제공 합 니 다.$filter 만 주입 하면 됩 니 다.사용 방법 은 다음 과 같 습 니 다.
app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
$scope.date = $filter('date')(new Date());
}1.currentcy,currency 를 사용 하면 숫자 를 화폐 로 포맷 할 수 있 습 니 다.기본 값 은 달러 기호 입 니 다.필요 한 기 호 를 직접 입력 할 수 있 습 니 다.
{{num | currency : '￥'}}
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
$scope.childrenArray = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
];
$scope.func = function(e){return e.age>4;}
{{ childrenArray | filter : 'a' }} // a
{{ childrenArray | filter : 4 }} // 4
{{ childrenArray | filter : {name : 'i'} }} // ， name i
{{childrenArray | filter : func }} // ， age>4
{{ jsonTest | json}}
{{ childrenArray | limitTo : 2 }} // 7.uppercase,대문자 로 변환.
8.number,숫자 포맷.number 필 터 는 하나의 숫자 에 천 자리 분할 을 더 할 수 있 습 니 다.이렇게 123,456,789.동시에 하나의 인 자 를 받 으 면 작은 float 형식 을 지정 하여 몇 개의 소 수 를 유지 할 수 있 습 니 다.
{{ num | number : 2 }}
<div>{{ childrenArray | orderBy : 'age' }}</div> // age
<div>{{ childrenArray | orderBy : orderFunc }}</div> //
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> // age ， name 우 리 는 먼저 인자 가 없 는 필 터 를 정의 합 니 다.첫 번 째 예 는 Angular 공식 문서 에서 나 왔 습 니 다.
우 리 는 데이터 가 사실 인지 확인 하고 싶 습 니 다.만약 사실 이 라면✓로 표시 합 니 다.그렇지 않 으 면 표시 합 니 다. ✘,유 니 코드 에서\u2713->✓,\u2718->✘,그래서 우리 가 해 야 할 일 은 데이터 가 진짜 인지 확인 한 다음 에 이 두 개의 특수 문자 로 전환 하여 출력 하 는 것 이다.
app.filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});필터 뒤에 콜론(:)을 사용 하여 구분 하 는 것 은 필터 의 매개 변수 입 니 다.필터 에서 이 매개 변 수 를 가 져 올 수 있 습 니 다.여러 개의 매개 변수 가 있 으 면 콜론(:)을 계속 사용 하여 구분 할 수 있 기 때문에 필 터 는 여러 개의 매개 변 수 를 가 질 수 있 습 니 다.
긴 문자열 을 자 르 는 필 터 를 구현 합 니 다.
app.filter("truncate", function(){
return function(text, length){
if (text) {
var ellipsis = text.length > length ? "..." : "";
return text.slice(0, length) + ellipsis;
};
return text;
}
});우리 가 검색 하고 자 하 는 키 워드 는 본문 에서 밝 혀 집 니 다.본문 은 필터 의 첫 번 째 매개 변수 이 고 두 번 째 매개 변 수 는 검색 키워드 입 니 다.그러면 우리 의 필 터 는 두 개의 매개 변수 가 있 을 것 입 니 다.
하 이 라이트 의 원 리 는 간단 합 니 다.하 이 라이트 가 필요 한 내용 을 span 태그 로 격 리 시 키 고 특수 한 class 를 추가 하여 설명 하면 됩 니 다.
app.filter("highlight", function($sce, $log){
var fn = function(text, search){
$log.info("text: " + text);
$log.info("search: " + search);
if (!search) {
return $sce.trustAsHtml(text);
}
text = encodeURI(text);
search = encodeURI(search);
var regex = new RegExp(search, 'gi')
var result = text.replace(regex, '<span class="highlightedText">$&</span>');
result = decodeURI(result);
$log.info("result: " + result );
return $sce.trustAsHtml(result);
};
return fn;
});
5.서비스 대상 정의
우리 의 페이지 는 매우 복잡 할 수 있 습 니 다.컨트롤 러 에 키 워드 를 입력 해 야 합 니 다.그러나 여러 컨트롤 러 에서 이 키 워드 를 사용 하여 여과 해 야 합 니 다.어떻게 처리 해 야 합 니까?서 비 스 를 이용 하면 이 문 제 를 해결 할 수 있다.
Angular 에서 서 비 스 는 하나의 사례 대상 입 니 다.저 희 는 factory 를 사용 하여 서비스 대상 을 직접 정의 할 수 있 습 니 다.
app.factory("notifyService", function(){
var target = {
search:"key"
};
return target;
});
6.검색 컨트롤 러 정의
검색 컨트롤 러 에서 저 희 는 사용자 가 검색 키 워드 를 제공 하 기 를 바 랍 니 다.검 사 를 편리 하 게 하기 위해 서,우 리 는 가 는 길에 사용자 의 입력 을 보 여 주 었 다.
<div ng-controller="tools">
<div>
<input type="text" ng-model="notify.search" value=""/>
</div>
<div>
{{notify.search}}
</div>
</div>
app.controller("tools", function($scope, notifyService){
$scope.notify = notifyService;
});7.콘 텐 츠 컨트롤 러 에 filter 사용
현재,우 리 는 이미 필터 가 있 고,서비스 대상 을 통 해 검색 키 워드 를 직접 얻 을 수 있 으 며,지금 조합 하면 사용 할 수 있다.text 는 우리 의 본문 내용 입 니 다.
<div ng-controller="search">
<div ng-bind-html="text | highlight:notify.search">
</div>
</div>
app.controller("search", function($scope, $log, notifyService){
$scope.text = "hello, world. hello, world. hello, world.";
$scope.notify = notifyService;
})이렇게 하면 복잡 한 페이지 에서 우 리 는 여러 개의 컨트롤 러 가 존재 할 수 있 습 니 다.하 이 라 이 트 를 필요 로 하 는 모든 컨트롤 러 에서 우 리 는 서비스 대상 을 주입 하면 현재 검색 키 워드 를 직접 얻 을 수 있 고 필 터 를 사용 하면 전체적인 하 이 라 이 트 를 직접 실현 할 수 있 습 니 다.
8.총화
필터 와 서비스 대상 을 결합 하여 우 리 는 복잡 한 페이지 에서 전체 페이지 의 내용 을 키워드 하 이 라 이 트 를 실현 합 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Angular에서 타사 스크립트 및 CSS 작업Angular 방식으로 회로도가 있는 외부 라이브러리를 추가하거나 모듈을 가져옵니다. Angular.json은 Angular 프로젝트의 모든 설정 파일이며 표준 JavaScript 및 CSS 파일과 함께 타사 라이브...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
