Angular의 Model 활용

select 박스에서 option을 선택하면 바로바로 값이 화면에 나타나는 기능을 만들어 보려합니다. 일단, head 부분에 angular.js를 사용하기위한 라이브러리를 가져오는 태그를 넣어줍니다.

<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>    
</head>

ng-app과 ng-controller를 설정해줍니다.

<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
        </div>
    </div>
    <script type="text/javascript">
        var myApp = angular.module("myApp", []);
        myApp.controller("myCtrl", ["$scope", function($scope){
            // controller logic
        }]);
    </script>
</body>

이제 년, 월, 일을 받을 수 있는 select 박스를 3개를 만듭니다. (예제를 뭘로 하면 좋을지 생각이 안나서 날짜 가져오는 예를 들었지만, 사실 <input type="date">로 하는데 더 효율적인 것 같습니다.)

<select ng-model="year">
    <option value="" selected disabled hidden>-</option>
    <option>2018</option>
    <option>2017</option>
    ... 생략 ...
    <option>1993</option>
    <option>1992</option>
</select>
<select ng-model="month">
    <option value="" selected disabled hidden>-</option>
    <option>12</option>
    <option>11</option>
    ... 생략 ...
    <option>2</option>
    <option>1</option>
</select>
<select ng-model="day">
    <option value="" selected disabled hidden>-</option>
    <option>31</option>
    <option>30</option>
    ... 생략 ...
    <option>2</option>
    <option>1</option>
</select>

바인딩을 하기위해 각각의 select 박스에 ng-model을 넣었습니다. 그리고, 화면에 나타내고 싶은 부분에 값을 출력해줍니다.

<!DOCTYPE html>
<html>
<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <h1>{{head_text}}</h1>
            <select ng-model="year">
                <option value="" selected disabled hidden>-</option>
                <option>2018</option>
                <option>2017</option>
                ... 생략 ...
                <option>1993</option>
                <option>1992</option>
            </select>
            <select ng-model="month">
                <option value="" selected disabled hidden>-</option>
                <option>12</option>
                <option>11</option>
                ... 생략 ...
                <option>2</option>
                <option>1</option>
            </select>
            <select ng-model="day">
                <option value="" selected disabled hidden>-</option>
                <option>31</option>
                <option>30</option>
                ... 생략 ...
                <option>2</option>
                <option>1</option>
            </select>
            <h1>{{year}}년 {{month}}월 {{day}}일</h1>
        </div>
    </div>
    <script type="text/javascript">
        var myApp = angular.module("myApp", []);
        myApp.controller("myCtrl", ["$scope", function($scope){
            // controller logic
            $scope.head_text = "오늘 날짜는?";
        }]);
    </script>
</body>
</html>

브라우저를 통해 화면을 살펴보면, 값이 변할때 마다 실시간으로 화면에 변화된 값이 표시됩니다.