AngularJS 에서 filter 의 사용 사례 에 대한 상세 한 설명
1.화폐 형식 으로 숫자 를 포맷 합 니 다.
<div>{{money|currency:"$"}}</div>
<div>{{money|currency:"RMB"}}</div>
script:
app.controller("crl", function($scope, $filter) {
$scope.money="4545";
});
표시 2.lowercase 에서 문자열 을 소문 자로 포맷 합 니 다.
{{ lastName | lowercase }}
app.controller("crl", function($scope, $filter) {
$scope.lastName ="AAA";
});
표시
aaa
3.uppercase 포맷 문자열 을 대문자 로 합 니 다.
{{ lastName | uppercase }}
app.controller("crl", function($scope, $filter) {
$scope.lastName ="aaa";
});
표시
AAA
4.filter 는 배열 항목 에서 하위 집합 을 선택 합 니 다.
<div>{{array|filter:"s"}}</div>
<div ng-repeat="item in array|filter:'s'">{{item.name}}</div>
app.controller("crl", function($scope, $filter) {
$scope.array = [ {
name : 'Tobias'
}, {
name : 'Jeff'
}, {
name : 'Brian'
}, {
name : 'Igor'
}, {
name : 'James'
}, {
name : 'Brad'
} ];
});
표시
[{"name":"Tobias"},{"name":"James"}]
Tobias
James
5.orderby 는 특정한 표현 식 에 따라 배열 합 니 다.필 터 를 입력 하면 파이프 문자(|)와 필 터 를 통 해 명령 에 추가 할 수 있 습 니 다.이 필 터 는 콜론 과 모델 이름 을 따 를 수 있 습 니 다.모델 이름 앞 에 마이너스 번 호 를 넣 으 면 내림차 순 이 고 기본 값 은 오름차 순 입 니 다.
<div ng-repeat="item in array|orderBy:'-name'"> {{item.name}}</div>
<div ng-repeat="item in array|orderBy:'name'"> {{item.name}}</div>
app.controller("crl", function($scope, $filter) {
$scope.array = [ {
name : 'Tobias',age:"18"
}, {
name : 'Jeff',age:"19"
}, {
name : 'Brian',age:"19"
}, {
name : 'Igor',age:"55"
}, {
name : 'James',age:"19"
}, {
name : 'Brad',age:"19"
} ,{
name : 'aaas',age:"19"
}];
});
표시
Tobias
Jeff
James
Igor
Brian
Brad
aaas
aaas
Brad
Brian
Igor
James
Jeff
Tobias
5.1.여러 모델 정렬(이름 순 으로 나이 순 으로 정렬)
<div ng-repeat="item in array|orderBy:['name','age']"> {{item.name}}{{item.age}}</div>
app.controller("crl", function($scope, $filter) {
$scope.array = [ {
name : 'Tobias',age:"18"
}, {
name : 'Jeff',age:"19"
}, {
name : 'Brian',age:"19"
}, {
name : 'Igor',age:"55"
}, {
name : 'James',age:"19"
}, {
name : 'adsd',age:"19"
} ,{
name : 'adsd',age:"20"
}];
});
표시
adsd19
adsd20
Brian19
Igor55
James19
Jeff19
Tobias18
이상 은 AngularJS filter 의 사용 사례 입 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 커 뮤 니 티 에 가서 토론 을 하 십시오.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
AngularJS의 ng-options best practise쓸데없는 말은 하지 말고 바로 코드를 찍어라. 리소스를api에 직접 전달하지 말고 문자열이나 정형(예를 들어 귀속된ng-model="selected")을 권장합니다 angular에서 생성된 의value가 무엇인지, ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.