Angularjs의 filter에 대해서 알아보겠습니다.
filter는 필터링 후에 재정렬을 시켜주는 기능을 한다고 생각하시면 될거 같습니다.
예제로 간단하게 filter를 사용해보겠습니다.
- html
<body ng-app="myApp">
<div ng-controller="ctrl1">
<label>Search: <input ng-model="searchText"></label>
<div ng-repeat="friend in friends | filter:searchText">
<span> {{ friend.name }} </span>
<span> {{ friend.age }} </span>
<span> {{ friend.gender }} </span>
</div>
<hr/>
<div ng-repeat="friend in friends | orderBy:'age'">
<span> {{ friend.name }} </span>
<span> {{ friend.age }} </span>
<span> {{ friend.gender }} </span>
</div>
</div>
</body>
- javascript
var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {
$scope.friends = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];
});
이름과 나이 성별로 구성된 JSON배열을 선언하고
ng-repeat에 | (파이프 기호)를 추가하여 filter 조건을 추가하였습니다.
| filter:searchText 는 input 에 선언된 ng-model=“searchText” 값에 따라
배열이 재정렬됩니다.
아래는 filter 모듈안에 있는 orderby를 이용하여 나이순으로 정렬하는 예입니다.
예제보기
'AngularJS' 카테고리의 다른 글
| [Angularjs] Angularjs ng-style, ngStyle, angurlajs css 적용 (0) | 2016.01.19 |
|---|---|
| [Angularjs] angularjs click ngclick 버튼 클릭 (0) | 2015.12.23 |
| [Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문 (0) | 2015.12.15 |
| [Angularjs] angularjs controller 컨트롤러 (0) | 2015.12.14 |
| [Angularjs] angularjs $scope 스코프 (0) | 2015.12.14 |