[AngularJS] ng-repeat(ngRepeat) directive 사용법 정리

ng-repeat directive는 배열에 저장된 item을 반복해서 보여줄 수 있다.
일종의 loop라고 생각하면 편할 것 같다.

아래는 AngularJS in Action 도서에 나오는 간단한 활용 예제이다.
보다 자세한 활용 예제는 여기서 확인할 수 있다.

app.js

myModule.controller('MainCtrl', function(){
 var main = this;

 main.stories = [
  {
   title: '1st story',
   description: 'the first user story',
   criteria: '요구사항 정리중...',
   status: 'To Do',
   type: '기능',
   reporter: '웹지니',
   assignee: '웹지니'
  },
  {
   title: '2nd story',
   description: 'the second user story',
   criteria: '요구사항 정리중...',
   status: 'Back Log',
   type: '기능',
   reporter: '웹지니',
   assignee: '웹지니'
  },
  {
   title: '3rd story',
   description: 'the third user story',
   criteria: '요구사항 정리중...',
   status: 'Code Review',
   type: '개선',
   reporter: '웹지니',
   assignee: '웹지니'
  }
 ];
 
});

index.html

 <div ng-controller="MainCtrl as main">
  <div class="col-md-4">
   <h2>Stories</h2>
   <div class="callout" ng-repeat="story in main.stories" ng-click="main.setCurrentStory(story)">
    <h4>{{story.title}}</h4>
    <p>{{story.description}}</p>
   </div>
  </div>  
 </div>

댓글

이 블로그의 인기 게시물

[IIS] OraOLEDB.Oracle.1 설치 방법

[IIS] IIS 7.5 HTTP 오류 401.3 - Unauthorized 해결방법

[ASP] Server.CreateObject를 호출하지 못했습니다. 이 개체에 액세스할 수 없습니다.