By GokiSoft.com| 09:37 16/02/2022|
AngularJS

[Video] Tạo POS bán hàng bằng AngularJS - C2108G3

Tạo POS bán hàng bằng AngularJS



#pos.html


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

	<!-- Bootstrap -> thiet ke GUI -->
	<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>

	<!-- AngularJS -> framework (js) -> duoc viet bang js (library js) -> file .js -> nhung cdn vao web -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}

		.item-product:hover {
			background-color: #e8e8e8;
			padding: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<div class="row">
		<div class="col-md-4">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>Thumbnail</th>
						<th>Title</th>
						<th>Num</th>
						<th>Price</th>
						<th>Total</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in cartList">
						<td><img src="{{ item.thumbnail }}" style="width: 80px"></td>
						<td>{{ item.title }}</td>
						<td>{{ item.num }}</td>
						<td>{{ item.price }}</td>
						<td>{{ item.price * item.num }}</td>
					</tr>
				</tbody>
			</table>

			<div class="row">
				<div class="col-md-6">
					Total Money:
				</div>
				<div class="col-md-6">
					$$$
				</div>
				<div class="col-md-6">
					Received Money:
				</div>
				<div class="col-md-6">
					<input type="number" name="received_money" class="form-control" value="0">
				</div>
				<div class="col-md-6">
					Cashback:
				</div>
				<div class="col-md-6">
					$$$
				</div>
			</div>
		</div>
		<div class="col-md-8">
			<div class="row">
				<div class="col-md-3 item-product" ng-repeat="item in productList">
					<img src="{{ item.thumbnail }}" style="width: 100%">
					<p>{{ item.title }}</p>
					<p>{{ item.price }}</p>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	app.controller('MyController', ['$scope', function ($scope) {
		//Thiet lap du lieu -> danh sach san pham
		$scope.productList = []
		for (var i = 0; i < 16; i++) {
			$scope.productList.push({
				'thumbnail': 'https://i0.wp.com/thisbugslife.com/wp-content/uploads/2021/03/depositphotos_19638723-stock-photo-fresh-orange-fruit-with-leaf.jpg?ssl=1',
				'title': 'San pham ' + i,
				'price': 1000 + i * 100
			})
		}

		//Thiet lap du lieu cart
		$scope.cartList = []
		for (var i = 0; i < 3; i++) {
			$scope.cartList.push({
				'thumbnail': 'https://i0.wp.com/thisbugslife.com/wp-content/uploads/2021/03/depositphotos_19638723-stock-photo-fresh-orange-fruit-with-leaf.jpg?ssl=1',
				'title': 'San pham ' + i,
				'price': 1000 + i * 100,
				'num': 1 + i
			})
		}
	}])
</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 đó