AngularJS로 미리 선언된 초기값을 화면에 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
div 태그에 ng-app 속성을 만들고 ng-init 속성으로 초기값을 설정한다.
ng-init 속성에 정의한 값을 바인딩하여 바로 사용할 수 있다.
<div ng-app=""
ng-init="color1='red';color2='green';color3='blue';
person={name:'OneWayJesus',skill:['MongoDB','Express','AngularJS','Node.js']}">
그리고 span 태그에 ng-bind 속성을 만든다. ng-bind 속성의 값을 ng-init에 정의한 값을 사용한다.
color1: <span ng-bind="color1"></span><br>
name: <span ng-bind="person.name"></span><br>
skill: <span ng-bind="person.skill.length"></span>
li 태그에 ng-repeat 속성을 입력하고 person.skill을 in으로 지정한다.
그러면 person.skill에 정의되어 있는 값이 하나씩 반복하며 표시된다.
<ul>
<li ng-repeat="sk in person.skill">
<span>{{ sk }}</span>
</li>
</ul>
예제코드
<!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="color1='red';color2='green';color3='blue';
person={name:'OneWayJesus',skill:['MongoDB','Express','AngularJS','Node.js']}">
<p>
color1: <span ng-bind="color1"></span><br>
color2: <span ng-bind="color2"></span><br>
color3: <span ng-bind="color3"></span>
</p>
<p>
name: <span ng-bind="person.name"></span><br>
</p>
<hr>
skill: <span ng-bind="person.skill.length"></span>
<ul>
<li ng-repeat="sk in person.skill">
<span>{{ sk }}</span>
</li>
</ul>
</div>
<hr>
</body>
</html>
위에서부터 순서대로 red, blue, person.name을 다음과 같이 표시된다.
length를 입력하면 person.skill에 정의된 값의 개수가 표시된다.
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] ng-repeat로 반복해서 표시해 보자. #1 (0) | 2023.02.22 |
|---|---|
| [AngularJS] 앱(ng-app)과 컨트롤러(ng-controller) 생성 (0) | 2023.02.22 |
| [AngularJS] ng-init 초기값 및 산술연산 (0) | 2023.02.22 |
| [AngularJS] ng-model과 nb-bind로 동적으로 연동 (0) | 2023.02.22 |
| [AngularJS] 안녕, 앵귤러 제이에스 (Hello, AngularJS) (0) | 2023.02.22 |
댓글