JSFiddle - React, Tailwind, and code Playground

by jteve code

HTML

<!-- 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>