AngularJS
회사에서 AngularJS로 프로젝트를 진행한지도
반 년이 넘어 가고 있습니다. 그 동안 앵귤러2.0이
나와서 1.0에서 2.0으로 넘어가야 되나 고민도
했었지만 아직 AngularJS 내부에서도 문제가
많은 거 같고, 예제도 적어 기존의 버전을
유지하기로 했고, 검색을 함에 있어 구글의
위대함을 알게 되었으며, 이래저래 책도
보면서 지금은 어느 정도 작업이 진행되고
있는 상태입니다...
현재까지는 AngularJS 선택에 큰
후회는 없는 상태이며, 개인적으로는
참 좋은 기술 하나 익히고 있다라는
생각을 가지고 있습니다 ㅎㅎ
이번에 멀티캠퍼스에서 AngularJS
교육을 듣고 있는데 복습 겸 공부 겸
블로그에 주저리 주저리 생각나는 데로
좀 적어 놓으려고 합니다 ㅎㅎㅎ
시간 날 때마다 올려 놓으려고 합니다.
시간에 쫓기는 교육이고, 단체 교육이라
아시는 분들께는 기초적인 내용이
될 수도 있겠다는 생각이 듭니다.
필터($Filter)
전체 예제 소스는 pdReport 카페에
올려 놓았으니 가셔서 받으세요~
$scope.value = 1000;
{{ value | currency }} : $1,000
/*
화폐 단위를 바꾸기 위해서는 각 나라 별로 js 파일이 존재하는 데
경로를 불러오면 된다(수업이 너무 빨라서 풀경로를 모르겠습니다 ㅠㅠ
*/
$scope.jObj = '{name : 'Mike'}';
{{ jObj | json }} : {"name" : "Mike"}
$scope.str = 'AbCdEfGh';
{{ str | lowercase }} : abcdefgh
$scope.int = 3.333333333333;
{{ int | number : 5 }} : 3.3333
<div>
<input type="text" ng-model=search.id>
</div>
<ul>
<li ng-repeat="user in users" | filter:search>
<p>{{ user.id}} | {{user.name}} | {{user.email}} </p>
</li>
</ul>
/*
search 값에 따라 테이블의 값이 조회 되어 해당 값들로만 재정렬 된다.
*/
ng-repeat="user in userList" | orderBy:order:reverse">
/*
테이블의 값들이 order 에 해당하는 필드 순으로 정렬 되는데
reverse에 값이 true/false 이냐에 따라 정렬/역정렬 된다
*/
<tr ng-repeat="obj in objs" | filter : q : strict>
/*
objs 안에 있던 배열의 값들이 테이블로 표현되는 q 변수 안에 담긴 값에 따라 검색이 되는데
이 때 strict의 값이 true이면 q 값과 정확히 일치하는 행만 화면에 출력된다.
*/
{{ 123456789 | limitTo : 2}} : 12
/*
123456789의 첫 두자리 값만 출력
*/
{{ 123456789 | -2 }} : 89
/*
끝 두 자리 값만 출력
*/
{{ 123.4455 | number:2 }} : 123.45
/*
소수점 두 째 자리까지 출력(그 밑으로 소수자리가 더 있으면 셋 째 자리에서 반올림)
*/
{{123.4455 | number:-2 }} : 100
/*
십의 자리에서 반올림
*/
/*
날짜 표현 방식이 yyyy-MM-dd 말고도 angularJS에서는 위와 같이도 제공한다
*/
<select ng-model="arrCountry" ng-options="country.name group by country.continent for country in countryList" ng-request="true">
/*
아래와 같이 selectbox가 생성되는데 country 배열 안에 있는 continent 값으로 group이 지어진다.
그리고 repeat를 사용했으므로 countryList 안에 있는 배열들이 총 세개가 찍히는데 이 때 값은
continet에 매핑되는 name 값으로 화면에 출력된다.
*/
음 소스까지 손으로 다 직접 칠려고 했는데
점점 귀찮아져서 캡처해서 올렸습니다 ㅎ
여기까지 올린게 다는 아니지만 filter
부분에 대해서 간단하게나마 올려 봤습니다.
다음에는 Form 관련 예제 올려 보겠습니다
No comments:
Post a Comment