[AngularJS] ng-options 와 ng-repeat 둘의 차이점은?

[AngularJS] ng-options vs ng-repeat

 

 

 

 

 

 

selectbox 형식으로 옵션 선택하는 기능을 개발하다 보면,

ng-options 를 쓸까, ng-repeat 를 쓸까 고민이 될 때가 있다. 무슨 차일까?

 

 

 

 

 

 

결론부터 말하면, 둘 중에 무엇을 쓰든 동작에는 무리없이 만들 수 있다!

 

 

개인적으로 그냥 HTML <select> 태그를 쓸 때에는 ng-options 가 기능을 구현하기 편하고,

FO 디자인을 위해 div>ul>li 형식에 css 입혀서 selectbox 모양으로 구현할 것이라면, ng-repeat 를 쓰는 게 낫다.

 

 

(사실 <select>태그 말고는 ng-options 는 사용하지 못한다)

 

 

 

 

 

 

<select>에는 ng-repeat & ng-options, 둘 다 사용이 가능하나, ngOptions 사용 시 장점이 있음!

 

 

 

 

 

 

아래는 AngularJS 공식 문서의 내용이다.

 

 

해석하자면,

 

 

 

<option> 요소를 구현하기 위해 종종 ngOptions 를 대신하여 ngRepeat 을 사용하기도 한다.

그러나, ngOptions 만의 장점이 있으니, 다음과 같다:

 

 

• select "as" 를 사용 시, 좀 더 융통성있게 사용이 가능하다. 

        예시) ng-options="item as item.label for item in items..."

• repeat 되면서 생겨나는 instance 들에 일일히 새로운 scope을 생성하지 않으므로 이에 할애하는 메모리가 적다.
  
  
• option 이 하나하나 repeat 되면서 생성되는게 아니라, documentFragment 라는 곳에 한방에 생성되므로, 이에 따른 렌더링 스피드의 향상도 있다.

 

 

 

 

또한, 2000 개의 옵션부터는 ngRepeat을 사용 시,

significant(굉장한) slowing down 이 발생한다고 한다.

 

 

어디서 이렇게 봤는데 기억이 나지 않는다...그렇다 하더라... 

 

 

 

 

 

 

 

 

 

 

 

ng-repeat 에 대해 더 알고 싶다면? ↓↓↓

 

 

 

[ng-repeat 의 사용법 & 프로퍼티]

 

[AngularJS] ng-repeat 프로퍼티($index, $first, $middle, $last, $even, $odd)

[AngularJS] ng-repeat 프로퍼티($index, $first, $middle, $last, $even, $odd)