AngularJS | AngularJS 기본 | 초기화와 계산 및 실시간 조작


여기서는 좀 더 확장하여 좀 쓸만한 것을 만들어 보자.

초기화와 계산

아래에 소비세의 계산을 하는 예제이다.

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-init="num = 100">
    <div>
    <p>price:<input type="text" ng-model="num"></p>
    <p style="font-weight:{{(num >= 10000) * 700}}">
        you typed: {{num * 1.08}}.</p>
    </div>
</body>
</html>

필드에 금액을 입력하면 세금(8% 세금)의 금액이 아래에 표시된다. 또한 금액이 1만원 이상이 되면, 금액 표시가 굵게 표시된다.

■ 초기화 처리

이번에는 새로운 디렉티브 하나가 추가되어 있다. 그것은 아래와 같다.

<body ng-init="num = 100">

ng-init라는 디렉티브는 모델의 초기화를 위한 것이다. 이것을 지정해 두면, 모델 값이 지정된 값으로 초기화된다.

■ 수식 사용

값을 표시하는 마크업 부분도 조금 바뀌었다. 이번에는 아래 같은 수식으로 값을 표시하고 있다.

you typed: {{num * 1.08}}.

이렇게 마크업에 수식을 설정할 수 있다. 이것으로 계산 결과가 자동으로 표시되도록 한다. 간단하다.

수식을 사용한 마크업은 잘 보면 다른 곳이 있다. 결과를 표시하고 있는 <p> 태그 부분이다.

<p style="font-weight:{{(num >= 10000) * 700}}">

num> 10000는 num의 값이 10000 이상이면 true, 미만이면 false가 된다. 이에 700을 곱하면 부울 값 (true 또는 false)은 정수 값(1 또는 0)에 캐스팅되어 1 * 700 또는 0 * 700이다. 그럼 “10000 이상이면 굵게 표시"가 되는 것이다.

단순히 간단한 계산만 하여도 이런 식으로 재미있는 것이 가능하다.

위치와 크기를 실시간 조작

그럼 모델과 마크업의 이용 예제로 표시되는 DOM의 위치나 크기를 실시간으로 조작하는 예제을 만들어 본다.

아래에 예제를 올려 두었다.

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <style>
    #rect {
        background-color:red;
        position:absolute;
    }
    </style>
</head>
<body ng-init="x = 100;y = 100; w = 100;h = 100">
    <div>
    x:<input type="number" min="0" max="300" ng-model="x" size="5">
    y:<input type="number" min="0" max="300" ng-model="y" size="5">
    w:<input type="number" min="0" max="300" ng-model="w" size="5">
    h:<input type="number" min="0" max="300" ng-model="h" size="5">
    </div>
    <div id="rect" style="left:{{x}}px;top:{{y}}px;width:{{w}}px;height:{{h}}px">
    </div>
</body>
</html>

4개의 필드의 값을 조작하여 변경하면, 실시간으로 빨강 사각형의 위치와 크기가 달라진다.

여기에서는 먼저 <body> 부분에서 값의 초기화를 하고 있다.

<body ng-init="x = 100;y = 100; w = 100;h = 100">

여러 값을 초기화를 하려면, 이런 식으로 세미콜론(;)으로 구분하여 작성할 수 있다. 즉, JavaScript 코드를 작성할 뿐이다.

<input type="number">ng-model을 정의하는 것은 이미 알고 있을 것이다. 이는 각각의 입력된 값이 x, y, w, h라는 것에 보관된다. 그리고 이러한 값을 원래 사각형의 <div> 표시가 설정된다.

<div id="rect" style="left:{{x}}px;top:{{y}}px;width:{{w}}px;height:{{h}}px">

{{}}에 의해 마크업은 이런 방식으로 style 속성 값에 넣을 수 있다. 마크업은 HTML 어디서나 쓸 수 있다. 그리고 그 값을 조작할 수 있다.

어떤가? 아직 JavaScript 코드는 거의 작성하지 않았는데(변수 초기화만 작성), 그래도 여러가지 재미있는 것을 할 수 있을 같지 않은가? 모델과 마크업을 사용하여 실제로 HTML의 다양한 값을 조작해 보도록 하자.