안녕하세요 슬릭데브 입니다.
오늘도 앵귤러를 배워보겠습니다.
질문과 요청사항, 팁, 조언 등등은 댓글로 언제든지 남겨주세요 ^^
자주 쓰이는 Angular.js의 필터 종류:
- uppercase : 알파벳 대문자로 텍스트 변경
- lowercase : 알파벳 소문자로 텍스트 변경
- currency : 화폐 단위로 텍스트 형식 변경
- filter : 기준점을 바탕으로 array(어레이)를 필터링 함.
- orderby : 기준점으로 array(어레이)를 정렬 함.
더 많은 필터는 여기에서 보세요: https://docs.angularjs.org/api/ng/filter/filter
Angular.js 테이블:
테이블 만들때는 HTML 에서와 동일하게 <tr></tr> 태그를 써주시면 됩니다.
다른 방법은 저번에 배웠던 ng-repeat을 사용하면 자동으로 테이블에 데이터가 출력됩니다.
<table> </table> 테이블 태그 안에는 밑에 태그들이 들어갑니다.
- <tr> </tr> : 테이블 열
- <td> </td> : 테이블 데이터
- <th> </th> : 테이블 헤딩
그럼 이제 필터와 테이블 사용방법을 예제로 봅시다.
전 오늘도 배고파서 먹는걸로 예제를 만들어 봤습니다. ^^
지금까지 <head> 태그에 들어가는건 변함이 없었습니다. 제목만 바꿨을뿐..
<body> 태그안에는 오늘 배운 테이블이 들어갑니다.
테이블의 border (테두리) 값은 0 이므로 선이 안보입니다.
<script> 태그 안에는 앵귤러 모듈(module) 이름을 mainApp 이라고 했습니다.
Controller(컨트롤러) 이름을 menuController 라고 정의했습니다.
dishes 에는 메뉴가 정렬 되어있습니다. JSON 형식으로 데이터를 정의했습니다.
formatName 이라는 function을 보시게 될텐데, 앵귤러 에서는 function을 이렇게 만듭니다.
이렇게 코드를 쓰셨다면 브라우저로 작동해보세요.
아래와 같은 화면이 보입니다.
오늘은 필터와 테이블을 배웠습니다.
오늘까지 배운거를 보면 앵귤러로 간단하게 만들 수 있고, 정렬할 수 있습니다.
이제 앞으로 Module, View, Scope, Service 정도만 배우면 Ionic을 배울 수 있을거 같습니다.
최종목표는 Ionic으로 하이브리드 앱을 만들 예정입니다.
감사합니다.
//슬릭데브
