[Video] Bài tập - Quản lý sản phẩm bằng javascript - AngularJS - C2110L

Bài tập - Quản lý sản phẩm bằng javascript - AngularJS
#index.html

Name: ZicZac: Thiết kế web & app & quản lý tồn kho
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Quan Ly San Pham</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<div class="card">
		<div class="card-header bg-success text-white">
			NHAP THONG TIN SAN PHAM
		</div>
		<div class="card-body">
			<form method="post" ng-submit="saveProduct()">
				<div class="form-group">
					<label>Ten SP: </label>
					<input required type="text" name="title" class="form-control" ng-model="title">
				</div>
				<div class="form-group">
					<label>NSX: </label>
					<select required name="manufacturer_name" class="form-control" ng-change="updateManufacturer()" ng-model="manufacturer_name">
						<option value="">-- Lua Chon --</option>
						<option value="{{ item.name }}" ng-repeat="item in manufacturerList track by $index">{{ item.name }}</option>
					</select>
				</div>
				<div class="form-group">
					<label>Danh Muc San Pham: </label>
					<select required name="category_name" class="form-control" ng-model="category_name">
						<option value="">-- Lua Chon --</option>
						<option value="{{ v }}" ng-repeat="v in categoryList">{{ v }}</option>
					</select>
				</div>
				<div class="form-group">
					<label>Gia: </label>
					<input required type="number" name="price" class="form-control" ng-model="price">
				</div>
				<div class="form-group">
					<label>So Luong: </label>
					<input required type="number" name="quantity" class="form-control" ng-model="quantity">
				</div>
				<div class="form-group">
					<label>Tong Gia: </label>
					<input disabled type="text" name="total_price" class="form-control" value="{{ price * quantity | currency:'':0 }}">
				</div>
				<div class="form-group">
					<button class="btn btn-success">Save Product</button>
					<button class="btn btn-warning" type="button" ng-click="resetForm()">Reset</button>
				</div>
			</form>
		</div>
	</div>

	<div class="card" style="margin-top: 20px">
		<div class="card-header bg-success text-white">
			QUAN LY SAN PHAM
		</div>
		<div class="card-body">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>STT</th>
						<th>Ten SP</th>
						<th>NSX</th>
						<th>Danh Muc</th>
						<th>Gia</th>
						<th>So Luong</th>
						<th>Tong Tien</th>
						<th style="width: 60px"></th>
						<th style="width: 60px"></th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in productList track by $index">
						<td>{{ $index + 1 }}</td>
						<td>{{ item.title }}</td>
						<td>{{ item.manufacturer_name }}</td>
						<td>{{ item.category_name }}</td>
						<td>{{ item.price | currency:'':0 }}</td>
						<td>{{ item.quantity | currency:'':0 }}</td>
						<td>{{ item.price * item.quantity | currency:'':0 }}</td>
						<td style="width: 60px">
							<button class="btn btn-warning" ng-click="editProduct($index)">Edit</button>
						</td>
						<td style="width: 60px">
							<button class="btn btn-danger" ng-click="removeProduct($index)">Delete</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	app.controller('MyController', ['$scope', function ($scope) {
		$scope.manufacturerList = [
			{
				'name': 'Apple',
				'categoryList': ['A01', 'A02', 'A03']
			}, {
				'name': 'Samsung',
				'categoryList': ['S01', 'S02', 'S03', 'S04', 'S05']
			}, {
				'name': 'Google',
				'categoryList': ['G01', 'G02']
			}
		]
		$scope.categoryList = []

		$scope.updateManufacturer = function() {
			$scope.categoryList = []
			// alert($scope.manufacturer_name)
			for(item of $scope.manufacturerList) {
				// alert(item.name)
				if(item.name == $scope.manufacturer_name) {
					$scope.categoryList = item.categoryList
					break
				}
			}
			// console.log($scope.categoryList)
		}

		$scope.productList = []

		$scope.resetForm = function() {
			$scope.title = ''
			$scope.manufacturer_name = ''
			$scope.category_name = ''
			$scope.price = ''
			$scope.quantity = ''
			$scope.currentIndex = -1
		}

		$scope.saveProduct = function() {
			var product = {
				'title': $scope.title,
				'manufacturer_name': $scope.manufacturer_name,
				'category_name': $scope.category_name,
				'price': $scope.price,
				'quantity': $scope.quantity,
			}

			if($scope.currentIndex >= 0) {
				$scope.productList[$scope.currentIndex] = product
				$scope.currentIndex = -1
			} else {
				$scope.productList.push(product)
			}
			$scope.resetForm()

			$scope.saveLocalStorage()
		}

		$scope.currentIndex = -1
		$scope.editProduct = function(index) {
			$scope.currentIndex = index

			$scope.title = $scope.productList[index].title
			$scope.manufacturer_name = $scope.productList[index].manufacturer_name
			$scope.updateManufacturer()

			$scope.category_name = $scope.productList[index].category_name
			$scope.price = $scope.productList[index].price
			$scope.quantity = $scope.productList[index].quantity
		}

		$scope.removeProduct = function(index) {
			option = confirm('Ban co chac chan xoa san pham nay khong?')
			if(!option) return

			$scope.productList.splice(index, 1)

			$scope.saveLocalStorage()
		}

		$scope.saveLocalStorage = function() {
			var json = JSON.stringify($scope.productList)

			localStorage.setItem('productList', json)
		}

		$scope.readLocalStorage = function() {
			var json = localStorage.getItem('productList')

			if(json != null && json != '') {
				$scope.productList = JSON.parse(json)
			}
		}

		$scope.readLocalStorage()
	}])
</script>
</body>
</html>
[Video] Bài tập - Quản lý sản phẩm bằng javascript - AngularJS - C2110L

#index.html

Tags:

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

5

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

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