AngularJS-필터
필터는 데이터를 수정하는 데 사용됩니다. 파이프 (|) 문자를 사용하여 표현식 또는 지시문에서 클럽으로 만들 수 있습니다. 다음 목록은 일반적으로 사용되는 필터를 보여줍니다.
| Sr. 아니. | 이름 및 설명 |
|---|---|
| 1 | uppercase 텍스트를 대문자 텍스트로 변환합니다. |
| 2 | lowercase 텍스트를 소문자 텍스트로 변환합니다. |
| 삼 | currency 통화 형식으로 텍스트 서식을 지정합니다. |
| 4 | filter 제공된 기준에 따라 배열을 하위 집합으로 필터링합니다. |
| 5 | orderby 제공된 기준에 따라 배열을 정렬합니다. |
대문자 필터
파이프 문자를 사용하여 식에 대문자 필터를 추가합니다. 여기에 학생 이름을 모두 대문자로 인쇄하기 위해 대문자 필터를 추가했습니다.
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}소문자 필터
파이프 문자를 사용하여 표현식에 소문자 필터를 추가합니다. 여기에 학생 이름을 모두 소문자로 인쇄하기 위해 소문자 필터를 추가했습니다.
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}통화 필터
파이프 문자를 사용하여 숫자를 반환하는 표현식에 통화 필터를 추가합니다. 여기에 통화 형식을 사용하여 수수료를 인쇄하는 통화 필터를 추가했습니다.
Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}필터
필수 주제 만 표시하려면 subjectName을 필터로 사용합니다.
Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
<li ng-repeat = "subject in student.subjects | filter: subjectName">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>OrderBy 필터
표식으로 주제를 주문하려면 orderBy 표식을 사용합니다.
Subject:
<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://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>
<tr>
<td>Enter fees: </td>
<td><input type = "text" ng-model = "student.fees"></td>
</tr>
<tr>
<td>Enter subject: </td>
<td><input type = "text" ng-model = "subjectName"></td>
</tr>
</table>
<br/>
<table border = "0">
<tr>
<td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td>
</tr>
<tr>
<td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td>
</tr>
<tr>
<td>fees: </td><td>{{student.fees | currency}}
</td>
</tr>
<tr>
<td>Subject:</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",
fees: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 파일을 엽니 다 . 결과를 확인하십시오.