<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 定义隔行换色的颜色-->
<style>
.css1{
background-color: palegreen;
}
.css2{
background-color: pink;
}
</style>
</head>
<body ng-controller="mykzq">
<!-- 实现模糊查询、排序功能-->
<div>
<input type="text" placeholder="请输入查询的商品" ng-model="search"/>
按数量排序:
<select ng-model="numBy">
<option value="num">数量正序</option>
<option value="-num">数量倒序</option>
</select>
<button ng-click="deleteAll()">批量删除</button>
</div>
<!-- 创建表格-->
<table border="1" cellspacing="0" style="width: 800px;" >
<tr>
<td><input type="checkbox" ng-click="selectAll()"></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td colspan="2">操作</td>
</tr>
<!--$index angular自带的索引 $even:实现隔行换色:分奇数偶数自行换色-->
<tr ng-repeat="x in Product | filter:{name:search} | orderBy:numBy" class="{{$even ? 'css1':'css2'}}">
<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.num" />
<button ng-click="add($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.num*x.price}}</td>
<td>
<button ng-click="remove($index)">删除</button>
</td>
<td>
<button ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<!--实现总价、总数量-->
<div style="margin-top: 10px;">
<span>总价:</span>
<span>{{totalPrices()}}</span>
<span>总数量:</span>
<span>{{numAll()}}</span>
<button ng-click="removeAll()">清空购物车</button>
</div>
<form style="border: 1px solid yellow; width: 260px;margin-top: 30px;">
商品编号:<input type="text" ng-model="ID"/><br />
商品名称:<input type="text" ng-model="IDname"/><br />
商品数量:<input type="number" ng-model="IDnum"/><br />
商品单价:<input type="text" ng-model="IDprice"/><br />
<button ng-click="add333()">添加</button>
</form>
<form style="border: solid black; width: 300px;" ng-show="updateShow">
商品编号:<input type="text" ng-model="updateId"/><br />
商品名称:<input type="text" ng-model="updateName"/><br />
商品数量:<input type="number" ng-model="updateNum"/><br />
商品编号:<input type="text" ng-model="updatePrice"/><br />
<button type="button" value="提交" ng-click="updateSub()">提交</button>
</form>
<!-- 引入angular-->
<script src="../libs/angular.min.js"></script>
<script>
//定义模板
var App = angular.module("App",[]);
//定义控制器
App.controller("mykzq",function($scope){
//给Product定义数据
$scope.Product = [{
id: 1000,
name: "iPhone8",
num: 1,
price: 8888,
state: false
}, {
id: 1001,
name: "iPhone9",
num: 1,
price: 9888,
state: false
}, {
id: 1002,
name: "iPhone 2s",
num: 1,
price: 3888,
state: false
}, {
id: 1003,
name: "iPhone 7P+",
num: 1,
price: 10088,
state: false
}];
//减数量的操作(传入参数)
$scope.jian = function(index){
if($scope.Product[index].num>=1){
$scope.Product[index].num--;
}else{
//删除
}
}
//加数量的操作
$scope.add = function(index){
$scope.Product[index].num++;
}
//删除的操作
$scope.remove = function(index){
if(confirm("确定删除吗?")){
$scope.Product.splice(index,1);
}
}
//算总价 每件商品的单价*数量,再相加到一起
$scope.totalPrices = function(){
var totalPrices = 0;
for (var x=0; x<$scope.Product.length;x++) {
totalPrices+=$scope.Product[x].num*$scope.Product[x].price;
}
return totalPrices;
}
//算总数量 每件商品的数量相加
$scope.numAll = function(){
var numAll = 0;
for (var x = 0; x<$scope.Product.length;x++) {
numAll+=$scope.Product[x].num;
}
return numAll;
}
//清空购物车 直接将数据设置为空
$scope.removeAll = function(){
$scope.Product=[];
}
//批量删除
$scope.deleteAll = function(){
//默认空的数组
var arr = [];
//循环数组
for (var x = 0;x<$scope.Product.length;x++) {
//如果状态是true的情况下,代表checkbox已经选中了
if($scope.Product[x].state){
arr.push($scope.Product[x].name);
}
}
//如果说数给的长度为0,证明一个都没有选中
if(arr.length<=0){
confirm("请选择需要删除的商品");
}else{
//说明数给的长度不为0,直接删除 ng-repeat ="x in 数组"
for (index in arr) {
for (index1 in $scope.Product ) {
if(arr[index]==$scope.Product[index1].name)
$scope.Product.splice(index1,1);
}
}
}
}
//进行添加的操作
$scope.add333 = function(){
//首先判断一下商品编号不能为空,商品编号要是数字类型
if($scope.ID=="" || $scope.ID==null){
alert("商品编号不能为空");
return;
}
if(isNaN($scope.ID)){
alert("商品编号必须为数字");
return;
}
//进行赋值
$scope.Product.push({
id:$scope.ID,
name:$scope.IDname,
num:$scope.IDnum,
price:$scope.IDprice
});
}
//修改的操作 默认表单隐藏
$scope.updateShow = false;
//定义空值
var updateId="";
var updateName ="";
var updateNum ="";
var updatePrice="";
$scope.update = function(index){
if(confirm("确定要修改吗?")){
//点击修改时,表单才显示
$scope.updateShow=true;
//回显数据 任何进行赋值
$scope.updateId = $scope.Product[index].id;
$scope.updateName = $scope.Product[index].name;
$scope.updateNum = $scope.Product[index].num;
$scope.updatePrice = $scope.Product[index].price;
}
}
//修改提交的操作
$scope.updateSub = function(){
//进行id的判断,如果id相等的情况下,我就进行删除的操作
for (index in $scope.Product) {
//如果ID相等的情况下,进行数据的修改
if($scope.updateId==$scope.Product[index].id){
$scope.Product[index].name=$scope.updateName;
$scope.Product[index].num=$scope.updateNum;
$scope.Product[index].price=$scope.updatePrice;
//修改后,表单自动隐藏
$scope.updateShow=false;
}
}
}
});
</script>
</body>
</html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 定义隔行换色的颜色-->
<style>
.css1{
background-color: palegreen;
}
.css2{
background-color: pink;
}
</style>
</head>
<body ng-controller="mykzq">
<!-- 实现模糊查询、排序功能-->
<div>
<input type="text" placeholder="请输入查询的商品" ng-model="search"/>
按数量排序:
<select ng-model="numBy">
<option value="num">数量正序</option>
<option value="-num">数量倒序</option>
</select>
<button ng-click="deleteAll()">批量删除</button>
</div>
<!-- 创建表格-->
<table border="1" cellspacing="0" style="width: 800px;" >
<tr>
<td><input type="checkbox" ng-click="selectAll()"></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td colspan="2">操作</td>
</tr>
<!--$index angular自带的索引 $even:实现隔行换色:分奇数偶数自行换色-->
<tr ng-repeat="x in Product | filter:{name:search} | orderBy:numBy" class="{{$even ? 'css1':'css2'}}">
<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.num" />
<button ng-click="add($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.num*x.price}}</td>
<td>
<button ng-click="remove($index)">删除</button>
</td>
<td>
<button ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<!--实现总价、总数量-->
<div style="margin-top: 10px;">
<span>总价:</span>
<span>{{totalPrices()}}</span>
<span>总数量:</span>
<span>{{numAll()}}</span>
<button ng-click="removeAll()">清空购物车</button>
</div>
<form style="border: 1px solid yellow; width: 260px;margin-top: 30px;">
商品编号:<input type="text" ng-model="ID"/><br />
商品名称:<input type="text" ng-model="IDname"/><br />
商品数量:<input type="number" ng-model="IDnum"/><br />
商品单价:<input type="text" ng-model="IDprice"/><br />
<button ng-click="add333()">添加</button>
</form>
<form style="border: solid black; width: 300px;" ng-show="updateShow">
商品编号:<input type="text" ng-model="updateId"/><br />
商品名称:<input type="text" ng-model="updateName"/><br />
商品数量:<input type="number" ng-model="updateNum"/><br />
商品编号:<input type="text" ng-model="updatePrice"/><br />
<button type="button" value="提交" ng-click="updateSub()">提交</button>
</form>
<!-- 引入angular-->
<script src="../libs/angular.min.js"></script>
<script>
//定义模板
var App = angular.module("App",[]);
//定义控制器
App.controller("mykzq",function($scope){
//给Product定义数据
$scope.Product = [{
id: 1000,
name: "iPhone8",
num: 1,
price: 8888,
state: false
}, {
id: 1001,
name: "iPhone9",
num: 1,
price: 9888,
state: false
}, {
id: 1002,
name: "iPhone 2s",
num: 1,
price: 3888,
state: false
}, {
id: 1003,
name: "iPhone 7P+",
num: 1,
price: 10088,
state: false
}];
//减数量的操作(传入参数)
$scope.jian = function(index){
if($scope.Product[index].num>=1){
$scope.Product[index].num--;
}else{
//删除
}
}
//加数量的操作
$scope.add = function(index){
$scope.Product[index].num++;
}
//删除的操作
$scope.remove = function(index){
if(confirm("确定删除吗?")){
$scope.Product.splice(index,1);
}
}
//算总价 每件商品的单价*数量,再相加到一起
$scope.totalPrices = function(){
var totalPrices = 0;
for (var x=0; x<$scope.Product.length;x++) {
totalPrices+=$scope.Product[x].num*$scope.Product[x].price;
}
return totalPrices;
}
//算总数量 每件商品的数量相加
$scope.numAll = function(){
var numAll = 0;
for (var x = 0; x<$scope.Product.length;x++) {
numAll+=$scope.Product[x].num;
}
return numAll;
}
//清空购物车 直接将数据设置为空
$scope.removeAll = function(){
$scope.Product=[];
}
//批量删除
$scope.deleteAll = function(){
//默认空的数组
var arr = [];
//循环数组
for (var x = 0;x<$scope.Product.length;x++) {
//如果状态是true的情况下,代表checkbox已经选中了
if($scope.Product[x].state){
arr.push($scope.Product[x].name);
}
}
//如果说数给的长度为0,证明一个都没有选中
if(arr.length<=0){
confirm("请选择需要删除的商品");
}else{
//说明数给的长度不为0,直接删除 ng-repeat ="x in 数组"
for (index in arr) {
for (index1 in $scope.Product ) {
if(arr[index]==$scope.Product[index1].name)
$scope.Product.splice(index1,1);
}
}
}
}
//进行添加的操作
$scope.add333 = function(){
//首先判断一下商品编号不能为空,商品编号要是数字类型
if($scope.ID=="" || $scope.ID==null){
alert("商品编号不能为空");
return;
}
if(isNaN($scope.ID)){
alert("商品编号必须为数字");
return;
}
//进行赋值
$scope.Product.push({
id:$scope.ID,
name:$scope.IDname,
num:$scope.IDnum,
price:$scope.IDprice
});
}
//修改的操作 默认表单隐藏
$scope.updateShow = false;
//定义空值
var updateId="";
var updateName ="";
var updateNum ="";
var updatePrice="";
$scope.update = function(index){
if(confirm("确定要修改吗?")){
//点击修改时,表单才显示
$scope.updateShow=true;
//回显数据 任何进行赋值
$scope.updateId = $scope.Product[index].id;
$scope.updateName = $scope.Product[index].name;
$scope.updateNum = $scope.Product[index].num;
$scope.updatePrice = $scope.Product[index].price;
}
}
//修改提交的操作
$scope.updateSub = function(){
//进行id的判断,如果id相等的情况下,我就进行删除的操作
for (index in $scope.Product) {
//如果ID相等的情况下,进行数据的修改
if($scope.updateId==$scope.Product[index].id){
$scope.Product[index].name=$scope.updateName;
$scope.Product[index].num=$scope.updateNum;
$scope.Product[index].price=$scope.updatePrice;
//修改后,表单自动隐藏
$scope.updateShow=false;
}
}
}
});
</script>
</body>
</html>