AngularJS 필터

필터는 데이터를 수정하는 데 사용됩니다. 파이프 문자(|)를 사용하여 표현식이나 지시어에 결합할 수 있습니다. 다음은 일반적으로 사용되는 필터 목록입니다.

순번	이름 및 설명
1	`uppercase` 텍스트를 대문자 텍스트로 변환합니다.
2	`lowercase` 텍스트를 소문자 텍스트로 변환합니다.
3	`currency` 문자를 통화 형식으로 설정합니다.
4	`filter` 제공된 조건에 따라 배열을 배열의 부集合으로 필터링합니다.
5	`orderby` 제공된 조건에 따라 배열을 정렬합니다.

uppercase - 대문자 필터

파이프 문자를 사용하여 표현식에 대문자 필터를 추가합니다. 여기서는 모든 대문자로 학생 이름을 인쇄하기 위해 대문자 필터를 추가했습니다.

이름 입력:<input type = "text" ng-model = "student.firstName">
성 입력: <input type = "text" ng-model = "student.lastName">
대문자 이름: {{student.fullName() | uppercase}}

lowercase - 소문자 필터

파이프 문자를 사용하여 표현식에 소문자 필터를 추가합니다. 여기서는 모든 소문자로 학생 이름을 인쇄하기 위해 소문자 필터를 추가했습니다.

이름 입력:<input type = "text" ng-model = "student.firstName">
성 입력: <input type = "text" ng-model = "student.lastName">
소문자 이름: {{student.fullName() | lowercase}}

currency - 통화 필터

구분기호 문자를 사용하여 표현식 반환 숫자에 통화 필터를 추가합니다. 여기서는 통화 형식으로 비용을 인쇄하기 위해 통화 필터를 추가했습니다.

비용 입력: <input type = "text" ng-model = "student.fees">fees: {{student.fees | currency}}

filter - 필터

필터를 사용하여 필요한 주제 만 표시하려면 subjectName을 필터로 사용합니다.

주제 입력: <input type = "text" ng-model = "subjectName">
주제:
<ul>
　　　<li ng-repeat = "subject in student.subjects | filter: subjectName">
　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　</li>
</ul>

orderby　- 필터

주제를 마크에 따라 정렬하려면 orderBy 마크를 사용합니다.

주제:
<ul>
　　　<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　</li>
</ul>

온라인 예제

위의 모든 필터의 사용을 보여주는 예제입니다。

testAngularJS.htm

예제

<html>
　　　<head>
　　　　　　<title>Angular JS Filters</title>
　　　　　　<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS 필터 사용 예제</h2>
　　　　　　
　　　　　　<div ng-app = "mainApp" ng-controller = "studentController">
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>이름 입력:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.firstName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>성 입력: </td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.lastName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>비용 입력: </td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.fees"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>주제 입력: </td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "subjectName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　　　　<br/>
　　　　　　　　　
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>대문자 이름: </td><td>{{ student.fullName() | uppercase}}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>소문자 이름: </td><td>{{ student.fullName() | lowercase}}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>비용: </td><td>{{ student.fees | currency}}
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>주제:</td>
　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　<ul>
　　　　　　　　　　　　　　　　　　　　　<li ng-repeat = "subject in student.subjects | filter: subjectName | orderBy:'marks'">
　　　　　　　　　　　　　　　　　　　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　　　　　　　　　　　　　　　　　　　</li>
　　　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController', function($scope) {}}}
　　　　　　　　　　　　$scope.student = {
　　　　　　　　　　　　　　　firstName: "Mahesh",
　　　　　　　　　　　　　　　lastName: "Parashar",
　　　　　　　　　　　　　　　500,
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　subjects:[
　　　　　　　　　　　　　　　　　　{name:'Physics',marks:70},
　　　　　　　　　　　　　　　　　　{name:'Chemistry',marks:80},
　　　　　　　　　　　　　　　　　　{name:'Math',marks:65}
　　　　　　　　　　　　　　　],
　　　　　　　　　　　　　　　fullName: function() {
　　　　　　　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　　　　　　　return studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　});
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

테스트를 해보세요‹/›

출력 결과

네트워크 브라우저에서 파일을 엽니다testAngularJS.htm결과를 확인하세요。

AngularJS 테이블 AngularJS 컨트롤러

AngularJS 기본 튜토리얼