dev in Serengeti

[AngularJS] ng-repeat 과 track by / 더블콜론(이중콜론) :: 더블콜론 ( :: ) 을 사용하는 이유? 시작하기 전 간단하게 더블콜론(double colon) 에 대해서 짚고 넘어가자. ng-repeat 에서 {{ :: friends.age }} 이런식으로 표현하게되면, 해당 요소는 최초 한번만 바인딩 하기로 제한하는 것이다. (one-time binding) => 해당 요소가 다시 렌더링되지 않는 이상, 값의 변화는 화면에 반영되지 않는다! 이제 본문으로 들어가서, ng-repeat 은 $watchCollection 이란 친구로 컬렉션 내의 변화를 감지한다. (여기선 $watchCollection 이라는 것이 있다더라...하고 넘어가면 된다) 순회하는 collection 의 요..

[AngularJS] ng-repeat 과 limitTo / orderBy / $parent ng-repeat 을 더 유용하고 편리하게 사용할 수 있는 잡기술(?) 들에 대해 알아보자 (사실, 잡기술이라기보단 필수적인 요소지만) 1) limitTo : ng-repeat 의 반복 횟수를 제한한다. 예를 들어 어떤 list 의 요소가 몇개가 오든 상관없이 상위 20개만 보여주고 싶다면, 아래와 같이 사용 가능하다. 너무 쉽다. [예시] {{item.name}} => limitTo 는 사실 angularJs 에서 제공하는 filter component 에 속하며, 추후 필터를 다룰 때 더 보기로 한다. 2) orderBy : ng-repeat 의 순서를 정렬한다. 뭔가 sql에서 봤던 것 같은 느낌이 든다. ..

[AngularJS] ng-repeat property($index, $first, $middle, $last, $even, $odd) ng-repeat 은 이름에도 나와있듯, collection 을 순환할 때 사용한다. 위 예제와 같이 "item" 이라는 임의의 변수를 선언하여 " item. " 으로 각 순회마다 각각의 배열 요소에 접근이 가능하다. 한 번 순환할 때마다 각각의 scope 이 생성되며, 그 순서는 $index 프로퍼티에 기록된다. 또한 편리한 사용을 위하여 angularjs 에서는 다음과 같이 유용한 기능들을 제공한다. 1) $index (number) : 순환되고 있는 요소의 순번(index) => id 값에 포함시켜서 구별짓기 위해 사용되기도 하고, 특정 순번을 선택할 때도 유용하다..

[AngularJS] ng-options vs ng-repeat selectbox 형식으로 옵션 선택하는 기능을 개발하다 보면, ng-options 를 쓸까, ng-repeat 를 쓸까 고민이 될 때가 있다. 무슨 차일까? 결론부터 말하면, 둘 중에 무엇을 쓰든 동작에는 무리없이 만들 수 있다! 개인적으로 그냥 HTML 태그를 쓸 때에는 ng-options 가 기능을 구현하기 편하고, FO 디자인을 위해 div>ul>li 형식에 css 입혀서 selectbox 모양으로 구현할 것이라면, ng-repeat 를 쓰는 게 낫다. (사실 태그 말고는 ng-options 는 사용하지 못한다) 에는 ng-repeat & ng-options, 둘 다 사용이 가능하나, ngOptions 사용 시 장점이 있음! 아래는 ..