AngularJS 필터
파이프 문자(|)를 사용하여 표현식과 지시문에 필터를 추가할 수 있습니다.
AngularJS 필터
AngularJS 필터는 데이터를 변환하는 데 사용할 수 있습니다.
| Filter | Description |
|---|---|
| currency | 숫자를 통화 형식으로 지정합니다. |
| filter | 배열 항목에서 하위 집합을 선택합니다. |
| 소문자 | 문자열을 소문자로 포맷합니다. |
| orderBy | 표현식을 기반으로 배열을 주문합니다. |
| 대문자 | 문자열을 대문자로 포맷합니다. |
표현식에 필터 추가
파이프 문자(|)와 필터를 통해 표현식에 필터를 추가할 수 있습니다. .
((아래 두 가지 예에서는 이전 장에서 언급한 사람 컨트롤러를 사용합니다))
uppercase 필터는 문자열을 대문자로 형식화합니다.
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
<script src="personController.js"></script>
</body>
</html>Run Instance »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
lowercase 필터는 문자열을 소문자로 형식화합니다:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | lowercase }}</p>
</div>
<script src="personController.js"></script>
</body>
</html>인스턴스 실행»
"인스턴스 실행" 클릭 " 버튼을 눌러 온라인 인스턴스 보기
통화 필터
currency 필터 형식을 통화 형식으로 지정:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="costCtrl">
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
});
</script>
</body>
</html>인스턴스 실행 »
"인스턴스 실행" " 버튼을 클릭하여 온라인 예제 보기
지시문에 필터 추가
파이프 문자(|)와 필터를 사용하여 지시문에 필터를 추가할 수 있습니다.
OnRDERBY器 필터는 다음 표현식에 따라 배열을 정렬합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
</body>
</html>예제 실행 »
필터 입력
입력 필터 파이프 문자(|)와 필터 뒤에 콜론과 모델 이름을 통해 지시문에 추가할 수 있습니다.
filter 필터는 배열에서 하위 집합을 선택합니다.
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Instances
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>输入过滤:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
</body>
</html>인스턴스 실행 »
