Angular js - Tutorial 2. 반복문, 조건문등

Angular js로 반복문 표현시 팁입니다. 앞선 예제 이어서 해보겠습니다.

<div class="wrap_webtoon" data-ng-controller="webtoonListCtrl"> <!-- 컨트롤러 지정 -->
    {{ webtoons.length }}개의 작품
    <ul class="list_webtoon">
        <li data-ng-repeat="webtoon in webtoons" data-ng-if="$index<3"> <!-- 루프 index가 3이하인것만 보여줌.. -->
            <a href="#none" class="link_webtoon">
                <span class="num_count">{{ $index+1 }}</span> <!-- 루프 index 표현방법 -->
                <!-- 섬네일 이미지가 없으면 default 이미지를 보여줍니다. ng-src를 사용하지 않고 src를 사용하면 페이지 로딩하면서 에러 찍히니 주의.. -->
                <img data-ng-src="{{ webtoon.thumbnailImage2?webtoon.thumbnailImage2.url:'default.jpg' }}" class="img_webtoon">
                <strong class="tit_webtoon">{{ webtoon.title }}</strong>
                <span class="txt_artist">{{ webtoon.cartoon.artists[0].name }}</span>
            </a>
        </li>
    </ul>
</div>

조건문

ng-if : 예제에는 index 가 3미만인것만 표기했습니다. (총 3개 노출)

webtoon.img ? webtoon.img : 'default.jpg' 등으로도 표현가능합니다.

반복문

$index : index 표현

$first : 첫번째 요소

$middle : 첫번째나 마지막 제외한 요소 모두

$last : 마지막 요소

$even : 짝수번째 요소

$odd : 홀수번째 요소

ps. 

이미지에 ng-src로 입력하지 않고 바로 src로 입력하면 data 로딩전에 에러 메세지를 뱉습니다. 

data 로딩전에 보여줄 디폴트 이미지를 src에 넣어두면 깜빡이더라도 자연스럽습니다.