By GokiSoft.com| 15:15 16/02/2022|
AngularJS

[Video] Thiết kế calculator online - Xử dụng AngularJS - C2110I

Thiết kế calculator online - Xử dụng AngularJS


#index.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Calculator Online</title>

	<!-- Nhung thu vien bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Nhung js angularjs vao du an (Framework) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		button, input {
			border: solid #dedcdc 2px !important;
			width: 100%;
			margin-top: 10px;
			font-weight: bold !important;
		}

		.btn-info {
			border: solid #0dcaf0 2px !important;
		}
	</style>
</head>
<body ng-controller="MyController">
<!-- <button class="btn btn-success" ng-if="false">OKOk TEST</button> -->
<div class="container">
	<div class="row">
		<div class="col-md-2">
		</div>
		<div class="col-md-7">
			<input type="text" class="form-control" value="0" ng-model="s">
		</div>
		<div class="col-md-3"></div>
	</div>
	<div class="row">
		<div class="col-md-1" ng-repeat="v in buttonList track by $index">
			<button class="btn btn-default" ng-if="v != '' && v != '='" ng-click="pressKey($index)">
				{{ v }}
			</button>
			<button class="btn btn-info" ng-if="v == '='" ng-click="pressKey($index)">
				{{ v }}
			</button>
		</div>
	</div>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	app.controller('MyController', ['$scope', function($scope){
		$scope.a = ''
		$scope.b = ''
		$scope.s = ''
		$scope.cal = ''

		$scope.buttonList = [
			'', '', 'Rad', 'Deg', 'x!', '(', ')', '%', 'AC', '', '', '',
			'', '', 'Inv', 'sin', 'ln', '7', '8', '9', '/', '', '', '',
			'', '', 'PI', 'cos', 'log', '4', '5', '6', '*', '', '', '',
			'', '', 'e', 'tan', 'sqrt', '1', '2', '3', '-', '', '', '',
			'', '', 'Ans', 'EXP', 'pow(x,y)', '0', '.', '=', '+', '', '', ''
		]

		$scope.pressKey = function(index) {
			// console.log(index)
			var key = $scope.buttonList[index]
			var result = ''
			// console.log(key)
			switch(key) {
				case '+':
				case '-':
				case '*':
				case '/':
				case '%':
					$scope.cal = key
				break;
				case '0':
				case '1':
				case '2':
				case '3':
				case '4':
				case '5':
				case '6':
				case '7':
				case '8':
				case '9':
				case '.':
					if($scope.cal != '') {
						$scope.b += key
					} else {
						$scope.a += key
					}
				break;
				case 'AC':
					$scope.a = ''
					$scope.b = ''
					$scope.s = ''
					$scope.cal = ''
				break;
				case '=':
					if($scope.a != '' && $scope.b != '') {
						//C1:
						// switch($scope.cal) {
						// 	case '+':
						// 		result = parseFloat($scope.a) + parseFloat($scope.b)
						// 	break;
						// 	case '-':
						// 		result = $scope.a - $scope.b
						// 	break;
						// 	case '*':
						// 		result = $scope.a * $scope.b
						// 	break;
						// 	case '/':
						// 		result = $scope.a / $scope.b
						// 	break;
						// 	case '%':
						// 		result = $scope.a % $scope.b
						// 	break;
						// }

						//Giai thich idea
						// var code = 'result = 6 + 8'
						// eval(code)
						
						//C2
						// var code = 'result = ' + $scope.a + $scope.cal + $scope.b
						// eval(code)

						//C3
						var code = $scope.a + $scope.cal + $scope.b
						result = eval(code)
					}
				break;
			}

			$scope.s = $scope.a + $scope.cal + $scope.b
			if(result != '') {
				$scope.s += '=' + result
			}
		}
	}])
</script>
</body>
</html>


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó