AngularJS 리스트 반복 처리

데이터를 취급하는 Web 페이지의 경우, 같은 형식의 다량의 데이터를 테이블 등의 형태로 표시하는 경우가 많다.

이런 경우는 어떤 “같은 표시를 반복 실행한다"라는 구조를 갖고 있다. 즉, 데이터를 “이런 형태로 작성해 간다"라는 것만 지정하면 이후에는 데이터를 전달하면 그 하나 하나를 반복하는 같은 형식으로 출력해 주는 구조이다.

AngularJS에는 “리스트"이라는 것이 있다. 이것은 배열 등의 형태로 정리한 것 중에서 순서대로 값을 꺼내 처리해 가는 구조이다. 이것은 HTML에 속성을 추가하는 것만으로 간단하게 사용할 수 있다.

그러면 예제을 만들면서 설명해 보겠다. 우선 스크립트를 작성하여, “script.js"라는 파일명으로 저장한다.

var myapp = angular.module('myapp',[]);
var helo = myapp.controller('HeloController',
    function(){
        this.count = 0;
        this.data = [
            {id:0,name:'no data',price:0,get:false},
            {id:1,name:'Android phone',price:7800,get:true},
            {id:2,name:'New iPhone',price:549020,get:false},
            {id:3,name:'windows phone',price:38765,get:true}
        ];
    }
);

여기에서는 HeloController라는 컨트롤러(이전까지 사용했던 예제)에 “data"라는 변수에 id, name, price, get 같은 항목의 데이터를 배열로 정리되어 있다. 이 데이터를 목록으로 형태 표시하려고 한다.

ng-repeat 동작

다음으로는 HTML 을 작성한다. 아래에 예제를 올려 두었다.

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="script.js"></script>
    <style>
    body { color:gray; }
    h1 { font-size:18pt; font-weight:bold; }
    span.label { display:inline-block;width:50px; color:red; }
    input { width:100px; }
    .msg { font-size:14pt; font-weight:bold;color:gray; }
    th { color:#eee; background-color:#999; padding: 5px 10px;}
    td { color:#333; background-color:#ddd; padding: 5px 10px;}
    </style>
</head>
<body ng-app="myapp" ng-init="num=0">
    <h1>데이터 표시</h1>
    <div ng-controller="HeloController as ctl">

    <table>
    <tr><th>ID</th><th>NAME</th><th>PRICE</th><th>GET?</th></tr>
    <tr ng-repeat="obj in ctl.data">
        <td>{{obj.id}}</td>
        <td>{{obj.name}}</td>
        <td>{{obj.price | currency:"₩"}}</td>
        <td>{{obj.get}}</td>
    </tr>
    </table>
     
    </div>
</body>
</html>

이렇게 작성하여 브라우저에 표시해 본다. data의 데이터가 테이블로 표시된다.

여기에서는 테이블을 사용하여 데이터를 표시하고 있다. 이 부분이다.

<table >
  <tr><th>...생략...</th></tr>
  <tr ng-repeat="obj in ctl.data">
    <td>{{obj.id}}</td>
    <td>{{obj.name}}</td>
    <td>{{obj.price | currency:"₩"}}</td>
    <td>{{obj.get }}</td>
  </tr>
</table>

<table>에는 특별한 것은 없다. 태크안에는 <tr> 태그에 있다. 여기에서 리스트에 의한 반복의 속성 (디렉티브)가 작성되어 있다. 이것은 다음과 같이 작성한다.

ng-repeat="변수 in 배열"

ng-repeat는 준비되어 있는 배열에서 값을 꺼내 변수로 설정하고, 이 ng-repeat가 적혀있는 태그를 출력한다. 즉, 배열에 저장되어 있는 값의 수만큼 ng-repeat가 작성되어 있는 태그가 반복 출력된다. <tr> 태그 내에 <td> 태그를 보면,

<td>{{obj.id}}</ td>

이와 같이, 배열에서 얻는 변수 obj 객체의 속성을 지정하여 출력시키고 있다. 객체를 배열에 정리해두면, 이런 식으로 객체 내에 값도 자유롭게 다룰 수 있다.