본문 바로가기
Web/자잘한거

[AngularJS] 양방향 데이터 바인딩의 예제

by juein 2018. 3. 13.
<!DOCTYPE html>
<html ng-app>
    <head>
        <title>todo</title>
        <script src="/js/angular.js"></script>
    </head>
    <script>

        var mainCtrl = function($scope){
            var menuList = [
                {
                    itemId : 1,
                    itemName : '목캔디',
                    itemPrice : 700,
                    itemCount : 0
                },
                {
                    itemId : 2,
                    itemName : '자갈치',
                    itemPrice : 2000,
                    itemCount : 0
                },
                {
                    itemId : 3,
                    itemName : '초코볼',
                    itemPrice : 1000,
                    itemCount : 0
                }
            ];

            $scope.menuList = menuList;
            $scope.totalPrice = 0;

            $scope.buy = function(){
                $scope.totalPrice = 0;

                angular.forEach($scope.menuList, function(menu, idx){
                    $scope.totalPrice = $scope.totalPrice + (menu.itemPrice * Number(menu.itemCount))
                });
            };
        }
    </script>
    <body ng-controller="mainCtrl">

        <ul class="list-unstyled">
            <li ng-repeat="menu in menuList">
                {{menu.itemName}}
                {{menu.itemPrice}}
                <input type="text" ng-model="menu.itemCount">
            </li>
        </ul>

        <button ng-click="buy()">buy</button>
        <p>가격 : {{totalPrice}}</p>

    </body>
</html>


ng-app : Angular 범위를 제한. 하위 노드들이 Angular기능을 사용할수 있게 된다.

<html ng-app>


ng-controller : 적용된 태그영역을 제어하는 컨트롤러 함수를 입력

<body ng-controller="mainCtrl">


ng-repeat: for/in과 같은 형태로 반복 데이터를 표현

<li ng-repeat="menu in menuList">


ng-model : 자바스크립트 객체와 화면 요소 사으의 양방향 데이터 바인딩을 가능하게 한다.

<input type="text" ng-model="menu.itemCount">


ng-click : 컨트롤러 함수의 $scope에 할당된 함수를 호출한다.

<button ng-click="buy()">buy</button>

댓글0