AngularJS로 미리 선언된 초기값을 ng-repeat 속성으로 반복해서 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
div 태그에 ng-init 속성을 만들고 값을 미리 정의한다.
<div ng-app="" ng-init="books=['MongoDB','Express','AngularJS','Node.js']">
ng-init에 정의한 books를 반복해서 표시하려면 태그에 ng-repeat 속성을 사용한다. 반복할 대상을 in으로 선언하고 그것을 표시하고자 하는 곳에 Angular 템플릿으로 정의한다.
<li ng-repeat="book in books">{{ book }}</li>
<p ng-repeat="book in books">{{ book }}</p>
예제코드
<!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="books=['MongoDB','Express','AngularJS','Node.js']">
<p>Book List:</p>
<ul>
<li ng-repeat="book in books">{{ book }}</li>
</ul>
<hr>
<p ng-repeat="book in books">{{ book }}</p>
</div>
<hr>
</body>
</html>
ng-init으로 정의한 목록이 아래의 화면과 같이 자동으로 반복하여 표시된다.
728x90
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] ng-controller에서 $scope 를 사용해보자. (0) | 2023.02.22 |
|---|---|
| [AngularJS] ng-repeat로 반복해서 표시해 보자. #2 (0) | 2023.02.22 |
| [AngularJS] 앱(ng-app)과 컨트롤러(ng-controller) 생성 (0) | 2023.02.22 |
| [AngularJS] ng-init 초기값 및 산술연산 (0) | 2023.02.22 |
| [AngularJS] ng-init 초기값 설정 (0) | 2023.02.22 |
댓글