Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 5. 필터(filter) - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 5. 필터(filter) - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:23
728x90
반응형

AngularJS Filters

 필터(Filter)는 파이프 기호(pipe character)를 사용하여 식이나 지시어에 추가 할 수 있습니다. 

1. AngularJS Filters
 AngularJS 필터는 데이터를 변형할 때 사용됩니다:


 

FilterDescription
currencyFormat a number to a currency format.
filterSelect a subset of items from an array.
lowercaseFormat a string to lower case.
orderByOrders an array by an expression.
uppercaseFormat a string to upper case.


[ 출처: W3Schools ]




2. Adding Filters to Expressions

 필터는 파이프 기호( | ) 와 필터와 함께 식에 추가되어 질 수 있습니다.

 uppercase 필터는 문자열을 대문자 형태로 만듭니다:

 

 

1
2
3
4
5
6
 
<div ng-app="myApp" ng-controller="personCtrl">
 
<p>The name is {{ lastName | uppercase }}</p>
 
</div>
cs




 lowercase 필터는 문자열을 소문자 형태로 만듭니다:
 
 

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <body>
 
    <div ng-app="myApp" ng-controller="personCtrl">
 
    <p>The name is {{ lastName | lowercase }}</p>
 
    </div>
 
    <script src="personController.js"></script>
 
    </body>
</html>
 
cs










3. The currency Filter
 currency 필터는 숫자를 화폐단위로 바꿉니다:

1
2
3
4
5
6
7
8
9
 
<div ng-app="myApp" ng-controller="costCtrl">
 
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
 
<p>Total = {{ (quantity * price) | currency }}</p>
 
</div>
cs






4. Adding Filters to Directives
 orderBy 필터는 식에 의해 배열을 정렬합니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <body>
 
    <div ng-app="myApp" ng-controller="namesCtrl">
 
    <p>Looping with objects:</p>
    <ul>
      <li ng-repeat="x in names | orderBy:'country'">
        {{ x.name + ', ' + x.country }}
      </li>
    </ul>
 
    </div>
 
    <script src="namesController.js"></script>
 
    </body>
</html>
 
cs


 
 







5. Filtering Input
 입력 필터는 지시어와 함께 파이프 기호를 통하여 추가하고, 콜론(:)과 model 이름이 뒤따라 옵니다.

 filter 필터는 배열의 부분집합을 선택합니다:

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
 
    <head>
    </head>
 
    <body>
 
    <div ng-app="" ng-controller="namesController">
 
    <p>Filtering input:</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>
 
cs




 








* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.


728x90
반응형
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 7. Table - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 6. Http - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 4. 제어(controller) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 3. 지시어(directives) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 2. 식(expression) - Angular JS 강좌  (0) 2016.06.14
'AngularJS_1' Related Articles more