티스토리 뷰

Programming language/Angularjs(1.x)

angularjs 요약2/ngController/ngRepeat

hello-world 2015. 11. 26. 16:45
728x90
반응형

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.





728x90
반응형
저작자표시 비영리 변경금지

'Programming language > Angularjs(1.x)' 카테고리의 다른 글

angularjs 에서 Service/Factory  (0) 2016.10.18
gulp 설정  (0) 2016.04.20
angularjs 정리3 ngApp/ngBind  (0) 2015.12.03
angularjs 1.2x ngAnimate 에 대한 요약  (0) 2015.11.25
angular js 요약1  (0) 2015.08.12
댓글