336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번엔 angularJS로 Array를 만들어서 출력해볼께요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<!-- 배열을 순서대로 넣었습니다. 이 배열은 0부터 위치가 시작됩니다. -->
<div ng-app="" ng-init="points=['java','script','angular','framework','!']">
<!-- points의 4번째, framework를 출력합니다. -->
<p>출력된 {{ points[3] }}</p>
<!-- points의 1번째, java를 출력합니다. -->
<p>출력된 <span ng-bind="points[0]"></span></p>
</div>
</body>
</html>
|
cs |
결과는
출력된 framework
출력된 java
감사합니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번에는 어떤곳에 소속되어 있는 값들을 불러오는 것을 알려드리겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<!-- 변수를 lan이라는 곳에 engName과 korName에 변수값을 넣습니다. -->
<div ng-app="" ng-init="lan={engName:'javascript',korName:'(자바스크립트)'}">
<!-- lan안에 변수들이 있어서 len.해당변수로 출력이 가능합니다. -->
<p><span ng-bind="lan.engName+' '+lan.korName"></span></p>
</div>
</body>
</html>
|
cs |
결과값은 javascript(자바스크립트)
ng-init에 보면 변수들이 쉼표를 기준으로 한쌍씩 lan에 들어가는 것을 볼 수 있습니다.
접근방법은 상위변수.값을 소유하고 있는 변수로 불러올수 있습니다.
ex) {{lan.engName}}
감사합니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번엔 expression 변수끼리 계산하는 것을 보려드릴꼐요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<!-- quantity에는 20, cost에는 5를 초기화합니다. -->
<div ng-app="" ng-init="quantity=20;cost=5">
<!-- 변수사이에 기호를 넣어 계산해줍니다. -->
<p>숫자계산: {{ quantity * cost }}</p>
</div>
</body>
</html>
|
cs |
설명은 보시다시피 위 주석에 다 있습니다.
소스코드를 실행하면 숫자계산: 100이 나오는 것을 확인할 수 있습니다.
두번째 방법은 ng-bind를 사용하는 방법입니다. ng-init까지 같지만 조금 다릅니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<!-- quantity에는 20, cost에는 5를 초기화합니다. -->
<div ng-app="" ng-init="quantity=20;cost=5">
<!-- 변수사이에 기호를 넣어 계산해줍니다. -->
<p>숫자계산: <span ng-bind="quantity+cost"></span></p>
</div>
</body>
</html>
|
cs |
이번에는 태그안에서 결과를 출력해줍니다.
자세히 보니까 더하기입니다.
결과는 숫자계산: 25가 나옵니다. 궁금하시다면 복사 붙여넣기해서 확인해주세요.
이제 마지막으로 변수에 있는 문자열들을 합쳐서 출력하는 방법을 알려드릴께요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<!-- 변수를 2개 선언합니다. -->
<div ng-app="" ng-init="firstSiteName='J';lastSiteName='DK'">
<!-- 연산 방지를 위해 +''+를 넣습니다. -->
<p>사이트: <span ng-bind="firstSiteName + ' ' + lastSiteName"></span></p>
</div>
</body>
</html>
|
cs |
약간 다른점이 있다는 문자열을 붙여서 나오게 +' '+를 했습니다.
결과는 사이트: J DK로 출력됩니다.
봐주셔서 감사합니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번에는 숫자만으로 계산하는 expression을 해보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<!-- 변수불러오는 곳에서 똑같이 식을 처리합니다. -->
<p>5 * 25 = {{ 5 * 25 }}</p>
</div>
</body>
</html>
|
cs |
소스코드 설명은 주석에 들어있습니다.
결과그림 보여드리겠습니다.
이렇게 잘나옵니다,
감사합니다.