<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title>月考增删改查综合练习</title>
<script src="../libs/angular.min.js"></script>
<script>
var App = angular.module("App", []);
App.controller("Demo", function($scope) {
$scope.datas = [{
id: 101,
name: "电脑",
nums: 1,
price: 6800,
state: false
}, {
id: 102,
name: "冰箱",
nums: 1,
price: 5200,
state: false
}, {
id: 103,
name: "空调",
nums: 1,
price: 6100,
state: false
}];
//数量减减
$scope.jian = function(index) {
if($scope.datas[index].nums <= 1) {
alert("数量不能为负数")
} else {
$scope.datas[index].nums--;
}
}
//数量加加
$scope.jia = function(index) {
$scope.datas[index].nums++;
}
//总数量
$scope.totalPrice = function() {
var to_price = 0;
for(var i = 0; i < $scope.datas.length; i++) {
to_price += $scope.datas[i].nums * $scope.datas[i].price
}
return to_price;
}
//总数
$scope.totalnum = function() {
var to_num = 0;
for(var i = 0; i < $scope.datas.length; i++) {
to_num += $scope.datas[i].nums;
}
return to_num;
}
//删除单个行
$scope.del = function(index) {
if(confirm("是否要删除?")) {
$scope.datas.splice(index, 1);
} else {
alert("已经取消删除!");
}
}
//多选框的全选反选
$scope.selcheackAll = function() {
if($scope.selecheack) {
//判断如果是选中状态
for(var x = 0; x < $scope.datas.length; x++) {
$scope.datas[x].state = true;
//循环遍历里面所有选中框的状态 设置为true(选中状态)
}
} else {
//否则遍历里面所有选中框的状态为 false(不选中状态)
for(var x = 0; x < $scope.datas.length; x++) {
$scope.datas[x].state = false;
}
}
}
//批量删除 根据名字删除
$scope.delselect = function() {
var arrs = [];
//遍历原始数据
for(var x = 0; x < $scope.datas.length; x++) {
//判断原始数据的状态
if($scope.datas[x].state) {
//添加到定义的空数组里
arrs.push($scope.datas[x].name)
}
}
//判断数组的长度小于等于0 ,也就是没有数据时,先提示选择
if(arrs.length <= 0) {
alert("请您选中需要删除的数据!");
} else {
//否则有数据就遍历arr数组
for(var x = 0; x < arrs.length; x++) {
//遍历原始数据
for(var x2 = 0; x2 < $scope.datas.length; x2++) {
//判断相等时,进行删除
if(arrs[x] == $scope.datas[x2].name) {
$scope.datas.splice(x2, 1);
}
}
}
}
}
//添加商品
$scope.add = function() {
var falg = false;
//判断id非空并且必须是数字
if($scope.ID == "" || $scope.ID == null) {
falg = false;
alert("id不能为空!");
return;
} else if(isNaN($scope.ID)) {
falg = false;
alert("id必须是数字");
return;
} {
falg = true;
}
//判断姓名不能为空
if($scope.IDname == "" || $scope.IDname == null) {
flag = false;
alert("姓名不能为空");
return;
} else {
flag = true;
}
//判断数量非空,并且是数字
if($scope.IDnum == "" || $scope.IDnum == null) {
flag = false;
alert("数量不能为空");
return;
} else if(isNaN($scope.IDnum)) {
flag = false;
alert("数量必须是数字")
return;
} else {
flag = true;
}
//判断单价非空,并且是数字
if($scope.IDprice == "" || $scope.IDprice == null) {
falg = false;
alert("单价不能为空!");
return;
} else if(isNaN($scope.IDprice)) {
flag = false;
alert("单价必须是数字!");
} {
falg = true;
}
if(falg = true) {
$scope.datas.push({
id: $scope.ID,
name: $scope.IDname,
nums: $scope.IDnum,
price: $scope.IDprice
})
}
}
//修改
$scope.update = function(index) {
up_index = index;
if(confirm("确认要对该商品进行修改么?")) {
$scope.updateShow = true;
}
}
//确认修改的方法
$scope.updateFun = function() {
$scope.datas[up_index].id = $scope.updateId;
$scope.datas[up_index].name = $scope.updateName;
$scope.datas[up_index].nums = $scope.updateNum;
$scope.datas[up_index].price = $scope.updatePrice;
}
})
</script>
</head>
<body ng-controller="Demo">
<div align="center">
<input type="text" placeholder="请输入查询商品" ng-model="search" /> 数量排序:
<select ng-model="selOrder">
<option value="nums">数量正序</option>
<option value="-nums">数量倒序</option>
</select>
<button ng-click="delselect()">批量删除</button>
<table border="1" cellspacing="0" width="650px" height="180px">
<tr>
<td><input type="checkbox" ng-model="selecheack" ng-click="selcheackAll()" /></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in datas | filter:{name:search}|orderBy:selOrder">
<td><input type="checkbox" ng-model="x.state" /></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td><button ng-click="jian($index)">-</button>
<input type="number" ng-model="x.nums" />
<button ng-click="jia($index)">+</button>
</td>
<td>{{x.price | currency:"¥"}}</td>
<td>{{x.nums* x.price |currency:"¥"}}</td>
<td><button ng-click="del($index)">删除</button>
<button ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<div>
<span>总价:{{totalPrice()}}</span>
<span>总数:{{totalnum()}}</span>
</div>
<form style="border: 2px solid black; width: 500px;height: 251px; margin-top: 20px;">
<h3>添加商品框</h3> 商品编号: <input type="text" placeholder="请输入id" ng-model="ID" /><br /><br /> 商品名称: <input type="text" placeholder="请输入商品名称" ng-model="IDname" /><br /><br /> 商品数量: <input type="number" placeholder="请输入商品数量" ng-model="IDnum" /><br /><br /> 商品单价: <input type="number" placeholder="请输入商品单价" ng-model="IDprice" /><br /><br />
<button ng-click="add()">添加</button>
</form>
<form style="border: 2px solid black; width: 500px;height: 251px; margin-top: 20px;" ng-show="updateShow">
<h3>修改商品表</h3> 商品编号:
<input type="text" placeholder="输入需要修改id" ng-model="updateId" /><br /><br /> 商品名称:
<input type="text" placeholder="输入需要修改商品" ng-model="updateName" /><br /><br /> 商品数量:
<input type="number" placeholder="输入需要修改数量" ng-model="updateNum" /><br /><br /> 商品单价:
<input type="number" placeholder="输入需要修改的单价" ng-model="updatePrice" /><br /><br />
<button ng-click="updateFun()">确认修改</button>
</form>
</div>
</body>
</html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title>月考增删改查综合练习</title>
<script src="../libs/angular.min.js"></script>
<script>
var App = angular.module("App", []);
App.controller("Demo", function($scope) {
$scope.datas = [{
id: 101,
name: "电脑",
nums: 1,
price: 6800,
state: false
}, {
id: 102,
name: "冰箱",
nums: 1,
price: 5200,
state: false
}, {
id: 103,
name: "空调",
nums: 1,
price: 6100,
state: false
}];
//数量减减
$scope.jian = function(index) {
if($scope.datas[index].nums <= 1) {
alert("数量不能为负数")
} else {
$scope.datas[index].nums--;
}
}
//数量加加
$scope.jia = function(index) {
$scope.datas[index].nums++;
}
//总数量
$scope.totalPrice = function() {
var to_price = 0;
for(var i = 0; i < $scope.datas.length; i++) {
to_price += $scope.datas[i].nums * $scope.datas[i].price
}
return to_price;
}
//总数
$scope.totalnum = function() {
var to_num = 0;
for(var i = 0; i < $scope.datas.length; i++) {
to_num += $scope.datas[i].nums;
}
return to_num;
}
//删除单个行
$scope.del = function(index) {
if(confirm("是否要删除?")) {
$scope.datas.splice(index, 1);
} else {
alert("已经取消删除!");
}
}
//多选框的全选反选
$scope.selcheackAll = function() {
if($scope.selecheack) {
//判断如果是选中状态
for(var x = 0; x < $scope.datas.length; x++) {
$scope.datas[x].state = true;
//循环遍历里面所有选中框的状态 设置为true(选中状态)
}
} else {
//否则遍历里面所有选中框的状态为 false(不选中状态)
for(var x = 0; x < $scope.datas.length; x++) {
$scope.datas[x].state = false;
}
}
}
//批量删除 根据名字删除
$scope.delselect = function() {
var arrs = [];
//遍历原始数据
for(var x = 0; x < $scope.datas.length; x++) {
//判断原始数据的状态
if($scope.datas[x].state) {
//添加到定义的空数组里
arrs.push($scope.datas[x].name)
}
}
//判断数组的长度小于等于0 ,也就是没有数据时,先提示选择
if(arrs.length <= 0) {
alert("请您选中需要删除的数据!");
} else {
//否则有数据就遍历arr数组
for(var x = 0; x < arrs.length; x++) {
//遍历原始数据
for(var x2 = 0; x2 < $scope.datas.length; x2++) {
//判断相等时,进行删除
if(arrs[x] == $scope.datas[x2].name) {
$scope.datas.splice(x2, 1);
}
}
}
}
}
//添加商品
$scope.add = function() {
var falg = false;
//判断id非空并且必须是数字
if($scope.ID == "" || $scope.ID == null) {
falg = false;
alert("id不能为空!");
return;
} else if(isNaN($scope.ID)) {
falg = false;
alert("id必须是数字");
return;
} {
falg = true;
}
//判断姓名不能为空
if($scope.IDname == "" || $scope.IDname == null) {
flag = false;
alert("姓名不能为空");
return;
} else {
flag = true;
}
//判断数量非空,并且是数字
if($scope.IDnum == "" || $scope.IDnum == null) {
flag = false;
alert("数量不能为空");
return;
} else if(isNaN($scope.IDnum)) {
flag = false;
alert("数量必须是数字")
return;
} else {
flag = true;
}
//判断单价非空,并且是数字
if($scope.IDprice == "" || $scope.IDprice == null) {
falg = false;
alert("单价不能为空!");
return;
} else if(isNaN($scope.IDprice)) {
flag = false;
alert("单价必须是数字!");
} {
falg = true;
}
if(falg = true) {
$scope.datas.push({
id: $scope.ID,
name: $scope.IDname,
nums: $scope.IDnum,
price: $scope.IDprice
})
}
}
//修改
$scope.update = function(index) {
up_index = index;
if(confirm("确认要对该商品进行修改么?")) {
$scope.updateShow = true;
}
}
//确认修改的方法
$scope.updateFun = function() {
$scope.datas[up_index].id = $scope.updateId;
$scope.datas[up_index].name = $scope.updateName;
$scope.datas[up_index].nums = $scope.updateNum;
$scope.datas[up_index].price = $scope.updatePrice;
}
})
</script>
</head>
<body ng-controller="Demo">
<div align="center">
<input type="text" placeholder="请输入查询商品" ng-model="search" /> 数量排序:
<select ng-model="selOrder">
<option value="nums">数量正序</option>
<option value="-nums">数量倒序</option>
</select>
<button ng-click="delselect()">批量删除</button>
<table border="1" cellspacing="0" width="650px" height="180px">
<tr>
<td><input type="checkbox" ng-model="selecheack" ng-click="selcheackAll()" /></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in datas | filter:{name:search}|orderBy:selOrder">
<td><input type="checkbox" ng-model="x.state" /></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td><button ng-click="jian($index)">-</button>
<input type="number" ng-model="x.nums" />
<button ng-click="jia($index)">+</button>
</td>
<td>{{x.price | currency:"¥"}}</td>
<td>{{x.nums* x.price |currency:"¥"}}</td>
<td><button ng-click="del($index)">删除</button>
<button ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<div>
<span>总价:{{totalPrice()}}</span>
<span>总数:{{totalnum()}}</span>
</div>
<form style="border: 2px solid black; width: 500px;height: 251px; margin-top: 20px;">
<h3>添加商品框</h3> 商品编号: <input type="text" placeholder="请输入id" ng-model="ID" /><br /><br /> 商品名称: <input type="text" placeholder="请输入商品名称" ng-model="IDname" /><br /><br /> 商品数量: <input type="number" placeholder="请输入商品数量" ng-model="IDnum" /><br /><br /> 商品单价: <input type="number" placeholder="请输入商品单价" ng-model="IDprice" /><br /><br />
<button ng-click="add()">添加</button>
</form>
<form style="border: 2px solid black; width: 500px;height: 251px; margin-top: 20px;" ng-show="updateShow">
<h3>修改商品表</h3> 商品编号:
<input type="text" placeholder="输入需要修改id" ng-model="updateId" /><br /><br /> 商品名称:
<input type="text" placeholder="输入需要修改商品" ng-model="updateName" /><br /><br /> 商品数量:
<input type="number" placeholder="输入需要修改数量" ng-model="updateNum" /><br /><br /> 商品单价:
<input type="number" placeholder="输入需要修改的单价" ng-model="updatePrice" /><br /><br />
<button ng-click="updateFun()">确认修改</button>
</form>
</div>
</body>
</html>