By GokiSoft.com|
09:35 18/02/2022|
AngularJS
[Video] Quản lý sản phẩm bằng javascript - AngularJS - C210G3
Quản lý sản phẩm bằng javascript - 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>Quan Ly San Pham - 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;
}
.form-group label {
font-weight: bold;
}
</style>
</head>
<body ng-controller="MyController">
<div class="container">
<div class="card">
<div class="card-header bg-info text-white" style="font-weight: bold;">
NHAP THONG TIN SAN PHAM
</div>
<div class="card-body">
<form method="post" ng-submit="saveProduct()">
<div class="form-group">
<label>Ten San Pham: </label>
<input required type="text" name="title" placeholder="Enter title" class="form-control" ng-model="title">
</div>
<div class="form-group">
<label>Ten Nha San Xuat: </label>
<select required class="form-control" name="manufacturer_name" ng-change="changeManufacturer()" ng-model="manufacturer_name">
<option value="">-- Lua Chon --</option>
<option value="{{ item.name }}" ng-repeat="item in manufacturerList">{{ item.name }}</option>
</select>
</div>
<div class="form-group">
<label>Danh Muc San Pham: </label>
<select required class="form-control" name="category_name" ng-model="category_name">
<option value="">-- Lua Chon --</option>
<option value="{{ v }}" ng-repeat="v in categoryList track by $index">{{ v }}</option>
</select>
</div>
<div class="form-group">
<label>Gia: </label>
<input required type="number" name="price" placeholder="Enter price" class="form-control" ng-model="price">
</div>
<div class="form-group">
<label>So Luong: </label>
<input required type="number" name="quantity" placeholder="Enter quantity" class="form-control" ng-model="quantity">
</div>
<div class="form-group">
<label>Tong Gia: </label>
<input required type="number" name="total_price" placeholder="Enter total price" class="form-control" value="{{ price * quantity }}" disabled>
</div>
<div class="form-group">
<button class="btn btn-info" type="submit">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-info text-white" style="font-weight: bold;">
DANH SACH SAN PHAM
</div>
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Product Name</th>
<th>Manufacturer Name</th>
<th>Category Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<!-- START: hien thi thong tin san pham -->
<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 }}</td>
<td>{{ item.price * item.quantity | currency:"$":0 }}</td>
<th><button class="btn btn-warning" ng-click="editItem($index)">Edit</button></th>
<th><button class="btn btn-danger" ng-click="removeItem($index)">Remove</button></th>
</tr>
<!-- END: hien thi thong tin san pham -->
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', ['$scope', function ($scope) {
$scope.productList = []
$scope.manufacturerList = [
{
"name": "Apple",
"categoryList": ["A01", "A02", "A03"]
}, {
"name": "SamSung",
"categoryList": ["S01", "S02", "S03", "S04", "S05"]
}, {
"name": "LG",
"categoryList": ["LG01", "LG02"]
}
]
$scope.categoryList = []
$scope.changeManufacturer = function() {
$scope.categoryList = []
for(item of $scope.manufacturerList) {
if(item.name == $scope.manufacturer_name) {
$scope.categoryList = item.categoryList
break
}
}
}
$scope.saveProduct = function() {
var item = {
'title': $scope.title,
'manufacturer_name': $scope.manufacturer_name,
'category_name': $scope.category_name,
'price': $scope.price,
'quantity': $scope.quantity
}
if($scope.currentIndex >= 0) {
//update
$scope.productList[$scope.currentIndex] = item
$scope.currentIndex = -1
$scope.resetForm()
} else {
$scope.productList.push(item)
}
}
$scope.currentIndex = -1
$scope.editItem = function(index) {
$scope.currentIndex = index
$scope.title = $scope.productList[index].title
$scope.manufacturer_name = $scope.productList[index].manufacturer_name
//update select -> category
$scope.changeManufacturer()
$scope.category_name = $scope.productList[index].category_name
$scope.price = $scope.productList[index].price
$scope.quantity = $scope.productList[index].quantity
}
$scope.resetForm = function() {
$scope.title = ''
$scope.manufacturer_name = ''
//update select -> category
$scope.changeManufacturer()
$scope.category_name = ''
$scope.price = 0
$scope.quantity = 0
}
$scope.removeItem = function(index) {
var option = confirm('Ban chac chan muon xoa san pham nay khong???')
if(!option) return
$scope.productList.splice(index, 1)
}
}])
</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)
