<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//加入假数据
$scope.datas = [{
id: 1001,
name: "iphone6",
price: 6888,
num: 1,
state: false
},
{
id: 1002,
name: "iphone4s",
price: 7888,
num: 1,
state: false
}, {
id: 1003,
name: "iphoneX",
price: 8888,
num: 1,
state: false
}
] ;
//Click to delete by name
$scope.del = function(na) {
if(window.confirm("Are you sure to delete" + na + "Are you" )) {
for(index in $scope.datas) {
if(na == $scope.datas[index].name) {
$scope.datas.splice(index, 1);
}
}
}
}
//Click the - sign to subtract the number
$scope.jian = function(index) {
if($scope.datas[index].num > 1) {
$scope.datas[index].num--;
} else {
alert("Can't subtract any more!, you You can delete the product")
}
}
//Click the + sign to increase the quantity
$scope.jia = function(index) {
$scope.datas[index].num++;
}
//总价格
$scope.prices = function() {
var p = 0;
for(var x = 0; x < $scope.datas.length; x++) {
p += $scope.datas[x].num * $scope.datas[x].price;
}
return p;
}
//总数量
$scope.content = function() {
var p = 0;
for(var x = 0; x < $scope.datas.length; x++) {
p += $scope.datas[x].num;
}
return p;
}
$scope.add = function() {
var flag1 = false;
var flag2 = false;
var flag3 = false;
var flag4 = false;
//judgment non-null must be a number
if($scope.ID == "" || $scope.ID == null) {
alert("id cannot be null");
flag1 = false;
} else if(isNaN($scope.ID )) {
alert("id must be a number");
flag1 = false;
} else {
flag1 = true;
}
if($scope.IDname == "" || $scope.IDname == null) {
alert("Item cannot be empty");
flag2 = false;
} else {
flag2 = true;
}
if($scope.IDnum == "" || $scope.IDnum == null) {
alert("Number cannot be null");
flag3 = false;
} else if(isNaN($scope.IDnum)) {
alert ("Quantity must be a number");
flag3 = false;
} else {
flag3 = true;
}
if($scope.IDprice == "" || $scope.IDprice == null) {
alert("Unit price cannot be null");
flag4 = false;
} else if(isNaN($ scope.IDprice)) {
alert("Unit price must be a number");
flag4 = false;
} else {
flag4 = true;
}
//Click to add display data
if(flag1 && flag2 && flag3 && flag4) {
$scope.datas. push({
id: $scope.ID,
name: $scope.IDname,
num: $scope.IDnum,
price: $scope.IDprice
});
}
}
//全选反选
$scope.selectAll = false;
$scope.selectAllFun = function() {
if($scope.selectAll) {
for(index in $scope.datas) {
$scope.datas[index].state = true;
}
} else {
for(index in $scope.datas) {
$scope.datas[index].state = false;
}
}
}
//Batch delete
$scope.delSelect = function() {
//Define an empty array
var arr = [];
for(index in $scope.datas) {
if($scope.datas[index].state) {
arr.push($scope.datas[index].name);
}
}
if(arr.length <= 0) {
alert("Please re-select the deleted item!");
} else {
if(window.confirm("Are you sure you want to delete?")) {
for(index in arr) {
for(index2 in $scope.datas) {
if(arr[index] == $scope.datas[index2 ].name) {
$scope.datas.splice(index2, 1);
}
}
}
} else {
alert("You have undeleted!");
}
}
}
//Modify the page
}
}
$scope.updateSub = function() {
$scope.updateArr = [];
if($scope.updateName == "" || $scope.updateName == null) {
$scope.updateArr.push("Product Name is empty");
}
if($scope.updatePrice == "" || $scope.updatePrice == null) {
$scope.updateArr.push("Product price is empty");
} else if(isNaN($scope .updatePrice)) {
$scope.updateArr.push("Product price is not an integer");
}
//Verification does not satisfy
if($scope.updateArr. length > 0) {
$scope.yz = true;
} else {
$scope.yz = false;
for(index in $scope.datas) {
if(parseInt($scope.updateId) == $scope.datas[index].id) {
$scope.datas[index].name = $scope.updateName;
$scope.datas[index].num = $scope.updateNum;
$scope.datas[index].price = $scope.updatePrice;
$scope.updateShow = false;
} else {
alert("验证成功!");
}
}
}
}
});
</script>
<style>
.css1 {
background-color: antiquewhite;
}
.css2 {
background-color: burlywood;
}
.sb {
cursor: pointer;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="请输入查询商品" ng-model="search" /> 数量排序:
<select ng-model = "selOrder">
<option value="num">数量正序</option>
<option value="-num">数量倒序</option>
</select>
<button ng-click="delSelect()" class="sb">批量删除</button><br />
<table border="2" cellspacing="0" width="800">
<thead>
<tr align="center" style="background-color: #DCDCDC;">
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></td>
<td width="100px">商品编号</td> <td width="100px">Item unit price</td> <td width="250px">Item quantity</td>
<td width="100px">Item name</td>
<td width="100px">商品总价</td>
<td width="110px">商品操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in datas | filter:{name:search}| orderBy:selOrder " class="{{ $even ? 'css1':'css2'}}" align="center">
<td><input type="checkbox" ng-model="a.state" /></td>
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="number" ng-model="a.num" />
<button ng-click="jia($index)">+</button>
</td>
<td>{{a.price}}</td>
<td>{{a.price*a.num}}</td>
<td><button ng-click="del(a.name)" class="sb">删除</button>
<button ng-click="updateShowFun(a)" class="sb">修改</button>
</td>
</tr>
</tbody>
</table>
<h3>总金额:{{prices()}} 总数量:{{content()}}</h1>
<form style="border: 1px solid yellow; width: 300px;">
<h3>添加商品</h3>
商品编号:<input type="text" ng-model="ID"/><br /><br />
商品名称:<input type="text" ng-model="IDname"/><br /><br />
商品数量:<input type="number" ng-model="IDnum"/><br /><br />
商品单价:<input type="text" ng-model="IDprice"/><br /><br />
<button ng-click="add()" class="sb">添加</button>
</form>
<form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
<h3>修改商品</h3> 商品编号:
<input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称:
<input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品数量:
<input type="number" placeholder="商品数量" ng-model="updateNum" /><br /><br /> 商品单价:
<input type="text" placeholder="商品单价" ng-model="updatePrice" /><br /><br />
<div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="yz">
<ul>
<li ng-repeat="chenk in updateArr">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" ng-click="updateSub()" class="sb" />
</form>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//加入假数据
$scope.datas = [{
id: 1001,
name: "iphone6",
price: 6888,
num: 1,
state: false
},
{
id: 1002,
name: "iphone4s",
price: 7888,
num: 1,
state: false
}, {
id: 1003,
name: "iphoneX",
price: 8888,
num: 1,
state: false
}
] ;
//Click to delete by name
$scope.del = function(na) {
if(window.confirm("Are you sure to delete" + na + "Are you" )) {
for(index in $scope.datas) {
if(na == $scope.datas[index].name) {
$scope.datas.splice(index, 1);
}
}
}
}
//Click the - sign to subtract the number
$scope.jian = function(index) {
if($scope.datas[index].num > 1) {
$scope.datas[index].num--;
} else {
alert("Can't subtract any more!, you You can delete the product")
}
}
//Click the + sign to increase the quantity
$scope.jia = function(index) {
$scope.datas[index].num++;
}
//总价格
$scope.prices = function() {
var p = 0;
for(var x = 0; x < $scope.datas.length; x++) {
p += $scope.datas[x].num * $scope.datas[x].price;
}
return p;
}
//总数量
$scope.content = function() {
var p = 0;
for(var x = 0; x < $scope.datas.length; x++) {
p += $scope.datas[x].num;
}
return p;
}
$scope.add = function() {
var flag1 = false;
var flag2 = false;
var flag3 = false;
var flag4 = false;
//judgment non-null must be a number
if($scope.ID == "" || $scope.ID == null) {
alert("id cannot be null");
flag1 = false;
} else if(isNaN($scope.ID )) {
alert("id must be a number");
flag1 = false;
} else {
flag1 = true;
}
if($scope.IDname == "" || $scope.IDname == null) {
alert("Item cannot be empty");
flag2 = false;
} else {
flag2 = true;
}
if($scope.IDnum == "" || $scope.IDnum == null) {
alert("Number cannot be null");
flag3 = false;
} else if(isNaN($scope.IDnum)) {
alert ("Quantity must be a number");
flag3 = false;
} else {
flag3 = true;
}
if($scope.IDprice == "" || $scope.IDprice == null) {
alert("Unit price cannot be null");
flag4 = false;
} else if(isNaN($ scope.IDprice)) {
alert("Unit price must be a number");
flag4 = false;
} else {
flag4 = true;
}
//Click to add display data
if(flag1 && flag2 && flag3 && flag4) {
$scope.datas. push({
id: $scope.ID,
name: $scope.IDname,
num: $scope.IDnum,
price: $scope.IDprice
});
}
}
//全选反选
$scope.selectAll = false;
$scope.selectAllFun = function() {
if($scope.selectAll) {
for(index in $scope.datas) {
$scope.datas[index].state = true;
}
} else {
for(index in $scope.datas) {
$scope.datas[index].state = false;
}
}
}
//Batch delete
$scope.delSelect = function() {
//Define an empty array
var arr = [];
for(index in $scope.datas) {
if($scope.datas[index].state) {
arr.push($scope.datas[index].name);
}
}
if(arr.length <= 0) {
alert("Please re-select the deleted item!");
} else {
if(window.confirm("Are you sure you want to delete?")) {
for(index in arr) {
for(index2 in $scope.datas) {
if(arr[index] == $scope.datas[index2 ].name) {
$scope.datas.splice(index2, 1);
}
}
}
} else {
alert("You have undeleted!");
}
}
}
//Modify the page
}
}
$scope.updateSub = function() {
$scope.updateArr = [];
if($scope.updateName == "" || $scope.updateName == null) {
$scope.updateArr.push("Product Name is empty");
}
if($scope.updatePrice == "" || $scope.updatePrice == null) {
$scope.updateArr.push("Product price is empty");
} else if(isNaN($scope .updatePrice)) {
$scope.updateArr.push("Product price is not an integer");
}
//Verification does not satisfy
if($scope.updateArr. length > 0) {
$scope.yz = true;
} else {
$scope.yz = false;
for(index in $scope.datas) {
if(parseInt($scope.updateId) == $scope.datas[index].id) {
$scope.datas[index].name = $scope.updateName;
$scope.datas[index].num = $scope.updateNum;
$scope.datas[index].price = $scope.updatePrice;
$scope.updateShow = false;
} else {
alert("验证成功!");
}
}
}
}
});
</script>
<style>
.css1 {
background-color: antiquewhite;
}
.css2 {
background-color: burlywood;
}
.sb {
cursor: pointer;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="请输入查询商品" ng-model="search" /> 数量排序:
<select ng-model = "selOrder">
<option value="num">数量正序</option>
<option value="-num">数量倒序</option>
</select>
<button ng-click="delSelect()" class="sb">批量删除</button><br />
<table border="2" cellspacing="0" width="800">
<thead>
<tr align="center" style="background-color: #DCDCDC;">
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></td>
<td width="100px">商品编号</td> <td width="100px">Item unit price</td> <td width="250px">Item quantity</td>
<td width="100px">Item name</td>
<td width="100px">商品总价</td>
<td width="110px">商品操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in datas | filter:{name:search}| orderBy:selOrder " class="{{ $even ? 'css1':'css2'}}" align="center">
<td><input type="checkbox" ng-model="a.state" /></td>
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="number" ng-model="a.num" />
<button ng-click="jia($index)">+</button>
</td>
<td>{{a.price}}</td>
<td>{{a.price*a.num}}</td>
<td><button ng-click="del(a.name)" class="sb">删除</button>
<button ng-click="updateShowFun(a)" class="sb">修改</button>
</td>
</tr>
</tbody>
</table>
<h3>总金额:{{prices()}} 总数量:{{content()}}</h1>
<form style="border: 1px solid yellow; width: 300px;">
<h3>添加商品</h3>
商品编号:<input type="text" ng-model="ID"/><br /><br />
商品名称:<input type="text" ng-model="IDname"/><br /><br />
商品数量:<input type="number" ng-model="IDnum"/><br /><br />
商品单价:<input type="text" ng-model="IDprice"/><br /><br />
<button ng-click="add()" class="sb">添加</button>
</form>
<form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
<h3>修改商品</h3> 商品编号:
<input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称:
<input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品数量:
<input type="number" placeholder="商品数量" ng-model="updateNum" /><br /><br /> 商品单价:
<input type="text" placeholder="商品单价" ng-model="updatePrice" /><br /><br />
<div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="yz">
<ul>
<li ng-repeat="chenk in updateArr">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" ng-click="updateSub()" class="sb" />
</form>
</center>
</body>
</html>