지난번에는 초기값으로 선언된 단순 배열을 반복해서 표시했다.
2023.02.22 - [■ Front-End ■/AngularJs] - [AngularJS] ng-repeat로 반복해서 표시해 보자. #1
[AngularJS] ng-repeat로 반복해서 표시해 보자. #1
AngularJS로 미리 선언된 초기값을 ng-repeat 속성으로 반복해서 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-init 속성을
agapeuni.tistory.com
이번에는 좀 더 복잡한 형태의 값을 표시하는 예제를 구현해 본다. div 태그에 ng-init 속성을 만들고 값을 미리 정의한다. names라는 이름의 name과 desc 속성을 가진 객체 배열을 정의하였다.
<div ng-app="" ng-init="names=[ {name:'Joo',desc:'Jesus'}, {name:'Han',desc:'One'}, {name:'Gil',desc:'Way'}]">
ng-init에 정의한 names를 반복해서 표시하려면 태그에 ng-repeat 속성을 사용하여 반복을 지정한다. 아래와 같이 반복할 대상을 in으로 선언하고 그것을 표시하고자 하는 곳에 Angular Expression으로 정의한다.
<li ng-repeat="x in names">{{ x.name + ' ==> ' + x.desc }}</li>
<p ng-repeat="y in names">{{ y }}</p>
<tr ng-repeat="z in names">
예제코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app=""
ng-init="names=[ {name:'Joo',desc:'Jesus'}, {name:'Han',desc:'One'}, {name:'Gil',desc:'Way'}]">
<p>Name :</p>
<ul>
<li ng-repeat="x in names">{{ x.name + ' ==> ' + x.desc }}</li>
</ul>
<hr>
<p ng-repeat="y in names">{{ y }}</p>
<hr>
<table width="300" border="1">
<tr ng-repeat="z in names">
<td>{{ z.name }}</td>
<td>{{ z.desc }}</td>
</tr>
</table>
</div>
<hr>
</body>
</html>
ng-init으로 정의한 목록이 아래의 화면과 같이 자동으로 반복하여 표시된다.
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] 표시되는 데이터를 정렬(orderBy) 해보자. (0) | 2023.02.22 |
|---|---|
| [AngularJS] ng-controller에서 $scope 를 사용해보자. (0) | 2023.02.22 |
| [AngularJS] ng-repeat로 반복해서 표시해 보자. #1 (0) | 2023.02.22 |
| [AngularJS] 앱(ng-app)과 컨트롤러(ng-controller) 생성 (0) | 2023.02.22 |
| [AngularJS] ng-init 초기값 및 산술연산 (0) | 2023.02.22 |
댓글