angularjs 요약2/ngController/ngRepeat
ngController
ngController 지시자는(directive)는 view controller class를 할당하고 있다.
이 지시자는 angular가 뒤에서 M(model), V(view), C(controller) 디자인 패턴을 어떻게 support 하는지 중요한 측면을 담당.
예) <body ng-controller="bodyController">
-설명 bodyController라고 하는 사용자 자바스크립트 클래스이다.
body에 해당 클래스를 선언하였으므로 <body></body> 사이에 있는 모든 요소에 영향 및 관리를 받게 된다.
ngRepeat
directive |
설명 |
ngRepeat |
형 : 반복문 컬렉션을 어느정도 방법으로 열거하는 식. 현재 아래 포맷과 같이 지원한다. 예) 반복변수 in 식 <li ng-repeat="item in items">{{$index}}번째 리스트</li> |
|
(키, 값) in 식 변수는 사용자가 정의하는 loop변수이고,식은 주어진 컬렉션을 열거하기 때문에 스코프식이다.
예) (name, age) in {'타요':10, '가니':12} |
변수 in 식 track by track식
임의의 track 함수을 제공할 수 있고 그것을 사용하는 것으로 컬렉션 내의 오브젝트를 dom 요소에 연결시키는 것이 가능하다. 만약 track함수를 지정하지 않으면 ng-repeat와 컬렉션내에 식별되고 있는 요소를 연결 대상로 한다. track함수가 동일한 key에서 복수의 결과를 얻을때 에러 발생. (이것은 같은 dom요소에 2개의 서로 다른 오브젝트를 맵핑할 수 없는 것을 의미) item in items는`item in items track by $id(item) '으로 평가되고 있으며, DOM 요소가 배열내 item의 ID에 암시적으로 연결된 것을 의미. 예) item in items track by $ id(item) 내장 $id() 함수는 고유의 $$ hashKey 속성을 배열내 각 항목에 할당하는 데 사용할 수 있다. 그 다음 속성은 ID 식별에 의해 배열의 해당 항목에 연결된 DOM 요소에 대한 key로 사용된다. 배열 내의 오브젝트를 이동하면 DOM의 요소도 마찬가지로 이동된다. 예 : item in items track by item.id 데이터베이스에서 항목을 검색 할 때의 전형적인 패턴. 이 경우 오브젝트의 id는 중요않고 id가 같다면 두 개체가 동일한 것으로 간주된다. 예 : item in items | filter : searchText track by item.id 항목에 필터 적용 및 track식을 조합하여 사용할 수 있다. |
ngRepeat 디렉티브는 컬렉션에서 각 항목의 템플릿을 인스턴스화한다.
각 템플릿의 인스턴스는 현재의 컬렉션항목이 설정된 loop의 변수이고, 항목의 index 또는 key가 설정된 $index 가 부여된다.
자신의 스코프을 가진다.
( 간단히 말하자면 for문과 처럼 반복문과 같다고 생각하면 된다. )
각 템플릿의 인스턴스의 로컬스코프에서 하기의 설명한 변수가 사용가능하다.
변수 |
설명 |
$index |
type:number 현재 반복 처리중의 몇번째인가를 표시 |
$first |
type:boolean 현재 요소의 반복 처리중의 최초값이 있다면 true가 된다. |
$middle |
type:boolean 현재 요소의 반복 처리 중의 중간값이 있다면 true가 된다. |
$last |
type:boolean 현재 요소의 반복 처리 중의 마지막값이 있다면 true가 된다. |
$even |
type:boolean $index가 짝수라면 true 그렇지 않으면 false. |
$odd |
type:boolean $index가 홀수라면 true 그렇지 않으면 false. |