<!-- index.html -->
<html ng-app='fruitApp' ng-controller="bodyController">
<head>
<meta charset="utf-8">
<link href='style.css' type="text/css" rel="stylesheet"></link>
</head>
<body>
<form >
<!-- ng-model 속성을 사용하면 요소를 모델 속성에 바인딩할 수 있다.-->
<!-- 값이 변경되면, computeNeeded 함수를 호출한다 -->
<!-- ng-model은 바로바로 데이터를 전송하지만, 체팅등에서는 바로 전달되면 안된다.-->
<!-- button을 사용하면, ng-submit 에서 호출된 함수가 수행된다.-->
창업 예산 : <input ng-change="computeNeeded()" ng-model="funding.startingEstimate"><br>
<!-- {{}} 이 중 중괄호는 ng-bind 와 같은 역할을 한다. 로딩중에 {{}} 표시가 나타나는 문제가 있다 -->
<p>권장 자본금 : {{funding.needed}}</p>
<!-- ng-bind 는 {{}} 와 같은 역할이다. 단방향으로 값만 가져온다 -->
<p ng-bind="funding.needed"></p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('fruitApp',[]);
var __bodyController = function ($scope){
// init data
$scope.funding ={
startingEstimate : 0,
needed : 0
};
// change input field data
$scope.computeNeeded = function (){
$scope.funding.needed = $scope.funding.startingEstimate * 10;
}
//watch(감시할 표현식, 표현식이 변경될 때 호출될 func)
// 감시할 표현식 : 문자열로 표현되며, scope안의 각종 속성에 접근 가능하다.
$scope.$watch('funding.startingEstimate',$scope.computeNeeded);
}
app.controller('bodyController',__bodyController);
</script>
</body>
</html>