-
[AngularJS] 5. 필터(filter) - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:17AngularJS Filters필터(Filter)는 파이프 기호(pipe character)를 사용하여 식이나 지시어에 추가 할 수 있습니다.1. AngularJS FiltersAngularJS 필터는 데이터를 변형할 때 사용됩니다:
Filter Description currency Format a number to a currency format. filter Select a subset of items from an array. lowercase Format a string to lower case. orderBy Orders an array by an expression. uppercase Format a string to upper case. [ 출처: W3Schools ]2. Adding Filters to Expressions필터는 파이프 기호( | ) 와 필터와 함께 식에 추가되어 질 수 있습니다.uppercase 필터는 문자열을 대문자 형태로 만듭니다:123456<div ng-app="myApp" ng-controller="personCtrl"><p>The name is {{ lastName | uppercase }}</p></div>cs lowercase 필터는 문자열을 소문자 형태로 만듭니다:12345678910111213141516<!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 Filtercurrency 필터는 숫자를 화폐단위로 바꿉니다:123456789<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 DirectivesorderBy 필터는 식에 의해 배열을 정렬합니다:123456789101112131415161718192021<!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 필터는 배열의 부분집합을 선택합니다:12345678910111213141516171819202122232425262728<!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 를 참고하여 작성하였습니다.
'Web > AngularJS' 카테고리의 다른 글
[AngularJS] 8. SQL - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 7. Table - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 6. Http - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 4. 제어(controller) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 3. 지시어(directives) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 2. 식(expression) - Angular JS 강좌 (0) 2015.06.12
