angularjs购物车 增删改查 排序 新增用户
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="utf-8" />
<title>购物车操作</title>
<style>
table tr:nth-child(even) {
background-color: lightgray;
}
tr button {
width: 30px;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
//过滤器
var sapp = angular.module("myapp", []);
sapp.controller("con", function($scope) {
$scope.stus = [];
$scope.fen1 = "price";
$scope.fen2 = true;
<meta charset="utf-8" />
<title>购物车操作</title>
<style>
table tr:nth-child(even) {
background-color: lightgray;
}
tr button {
width: 30px;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
//过滤器
var sapp = angular.module("myapp", []);
sapp.controller("con", function($scope) {
$scope.stus = [];
$scope.fen1 = "price";
$scope.fen2 = true;
//判断用户名与商品名称输入等操作
$scope.add = function() {
if($scope.uname == undefined || $scope.uname == "" || $scope.uname.length <= 2 || $scope.uname.length > 20) {
alert("商品名称输入有误！");
} else if($scope.typee == undefined || $scope.typee.length <= 2 || $scope.typee.length > 20 || $scope.typee == "") {
alert("商品类型输入有误！");
} else if($scope.price < 0 || $scope.price == undefined) {
alert("商品价格输入有误！");
} else {
if($scope.count == null) {
$scope.count = 1;
}
var good = {
name: $scope.uname,
type: $scope.typee,
price: $scope.price,
count: $scope.count
};
$scope.stus.push(good);
}
}
$scope.add = function() {
if($scope.uname == undefined || $scope.uname == "" || $scope.uname.length <= 2 || $scope.uname.length > 20) {
alert("商品名称输入有误！");
} else if($scope.typee == undefined || $scope.typee.length <= 2 || $scope.typee.length > 20 || $scope.typee == "") {
alert("商品类型输入有误！");
} else if($scope.price < 0 || $scope.price == undefined) {
alert("商品价格输入有误！");
} else {
if($scope.count == null) {
$scope.count = 1;
}
var good = {
name: $scope.uname,
type: $scope.typee,
price: $scope.price,
count: $scope.count
};
$scope.stus.push(good);
}
}
//数量
$scope.shu = function() {
var l = 0;
for(var i in $scope.stus) {
l = l + $scope.stus[i].count;
}
return l;
}
$scope.shu = function() {
var l = 0;
for(var i in $scope.stus) {
l = l + $scope.stus[i].count;
}
return l;
}
//总计
$scope.sum = function() {
var zo1 = 0;
for(var i in $scope.stus) {
zo1 = zo1 + $scope.stus[i].price * $scope.stus[i].count;
}
return zo1;
}
//批量删除
$scope.ckAll = function() {
for(var i = 0; i < $scope.stus.length; i++) {
$scope.stus[i].ck = $scope.flag;
}
}
$scope.sum = function() {
var zo1 = 0;
for(var i in $scope.stus) {
zo1 = zo1 + $scope.stus[i].price * $scope.stus[i].count;
}
return zo1;
}
//批量删除
$scope.ckAll = function() {
for(var i = 0; i < $scope.stus.length; i++) {
$scope.stus[i].ck = $scope.flag;
}
}
//批量删除
$scope.delso = function() {
var sh = 0;
for(var i = 0; i < $scope.stus.length; i++) {
if($scope.stus[i].ck) {
$scope.stus.splice(i, 1);
sh++;
i--;
}
}
}
$scope.delso = function() {
var sh = 0;
for(var i = 0; i < $scope.stus.length; i++) {
if($scope.stus[i].ck) {
$scope.stus.splice(i, 1);
sh++;
i--;
}
}
}
//del代表删除按钮
//删除弹框是否删除如果是就删
$scope.del = function(e) {
// 判断是否删除
for(var i in $scope.stus) {
if($scope.stus[i].name == e) {
if($scope.stus[i].name == e) {
if(confirm("确认删除吗？")) {
$scope.stus.splice(i, 1);
i--;
}
}
}
}
$scope.stus.splice(i, 1);
i--;
}
}
}
}
//num 代表加减一的按钮
//添加完操作删除<!--根据商品序号进行删除--> -1 0 cc代表加减数量 i代表数据的索引index
$scope.num = function(cc, i) {
if($scope.stus[i].count >= 1) {
$scope.stus[i].count = $scope.stus[i].count + cc;
} else {
//这就是数量小于一 直接弹框删除
if(confirm("是否要删除该商品?")) {
$scope.stus.splice(i, 1);
}
}
}
//添加完操作删除<!--根据商品序号进行删除--> -1 0 cc代表加减数量 i代表数据的索引index
$scope.num = function(cc, i) {
if($scope.stus[i].count >= 1) {
$scope.stus[i].count = $scope.stus[i].count + cc;
} else {
//这就是数量小于一 直接弹框删除
if(confirm("是否要删除该商品?")) {
$scope.stus.splice(i, 1);
}
}
}
//清空
$scope.empty = function() {
$scope.stus = [];
}
//修改回显数据
$scope.xiugai1 = function (name) {
for (var i in $scope.stus) {
if ($scope.stus[i].name == name) {
$scope.u2name = $scope.stus[i].name;
$scope.count2 = $scope.stus[i].count;
$scope.price2 = $scope.stus[i].price;
$scope.type2 = $scope.stus[i].type;
}
}
$scope.fsf = true;
}
//修改赋值
$scope.xiugai2 = function () {
var reg_=/米/g;
var n_uname=$scope.u2name.replace(reg_,"*") ;
var n_count=$scope.count2;
var n_ty=$scope.type2;
var n_price=$scope.price2;
for (var i = 0; i < $scope.stus.length; i++) {
if($scope.stus[i].name==n_uname){
$scope.stus[i].name=n_uname;
$scope.stus[i].price=n_price;
$scope.stus[i].type=n_ty;
$scope.stus[i].count=n_count;
}
}
$scope.fsf=false;
}
$scope.empty = function() {
$scope.stus = [];
}
//修改回显数据
$scope.xiugai1 = function (name) {
for (var i in $scope.stus) {
if ($scope.stus[i].name == name) {
$scope.u2name = $scope.stus[i].name;
$scope.count2 = $scope.stus[i].count;
$scope.price2 = $scope.stus[i].price;
$scope.type2 = $scope.stus[i].type;
}
}
$scope.fsf = true;
}
//修改赋值
$scope.xiugai2 = function () {
var reg_=/米/g;
var n_uname=$scope.u2name.replace(reg_,"*") ;
var n_count=$scope.count2;
var n_ty=$scope.type2;
var n_price=$scope.price2;
for (var i = 0; i < $scope.stus.length; i++) {
if($scope.stus[i].name==n_uname){
$scope.stus[i].name=n_uname;
$scope.stus[i].price=n_price;
$scope.stus[i].type=n_ty;
$scope.stus[i].count=n_count;
}
}
$scope.fsf=false;
}
//添加的用户
$scope.insert=function(m){
var good={name:$scope.tname,type:$scope.ttype,count:$scope.tcount,price:$scope.tprice};
$scope.stus.push(good);
}
})
</script>
</head>
$scope.insert=function(m){
var good={name:$scope.tname,type:$scope.ttype,count:$scope.tcount,price:$scope.tprice};
$scope.stus.push(good);
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="con">
模糊查询:<input ng-model="mohu" />
商品名称:<input ng-model="uname" />
类型: <input ng-model="typee" />
价格: <input type="number" ng-model="price" />
数量: <input type="number" ng-model="count" />
<select ng-model="souprice">
<option value="">价格排序</option>
<option value="+price">价格正序</option>
<option value="-price">价格倒序</option>
</select>
<button ng-click="add()">添加</button>
<button style="color: #FFFFFF; background-color: crimson;margin: 6px;" ng-click="delso()">批量删除</button>
模糊查询:<input ng-model="mohu" />
商品名称:<input ng-model="uname" />
类型: <input ng-model="typee" />
价格: <input type="number" ng-model="price" />
数量: <input type="number" ng-model="count" />
<select ng-model="souprice">
<option value="">价格排序</option>
<option value="+price">价格正序</option>
<option value="-price">价格倒序</option>
</select>
<button ng-click="add()">添加</button>
<button style="color: #FFFFFF; background-color: crimson;margin: 6px;" ng-click="delso()">批量删除</button>
<table width="900" border="1" cellspacing="0">
<tr style="background-color: lightslategray;">
<th><input type="checkbox" ng-click="ckAll()" ng-model="flag"/></th>
<th>商品序号</th>
<th>商品名称</th>
<th ng-click="fen1='price';fen2=!fen2">商品价格</th>
<th ng-click="fen1='count';fen2=!fen2">商品数量</th>
<th>商品类型</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr style="background-color: lightslategray;">
<th><input type="checkbox" ng-click="ckAll()" ng-model="flag"/></th>
<th>商品序号</th>
<th>商品名称</th>
<th ng-click="fen1='price';fen2=!fen2">商品价格</th>
<th ng-click="fen1='count';fen2=!fen2">商品数量</th>
<th>商品类型</th>
<th>小计</th>
<th>操作</th>
</tr>
<!--表格操作 |filter: {name:mohu}根据name模糊查询 价格排序-->
<tr ng-repeat="a in stus|filter: {name:mohu}|orderBy : souprice">
<td><input type="checkbox" ng-model="a.ck"/></td>
<td>{{$index}}</td>
<td>{{a.name}}</td>
<td>{{a.price}}</td>
<td><button ng-click="num(-1,$index)">-</button>
<input style="width: 30px;" ng-model="a.count" />
<tr ng-repeat="a in stus|filter: {name:mohu}|orderBy : souprice">
<td><input type="checkbox" ng-model="a.ck"/></td>
<td>{{$index}}</td>
<td>{{a.name}}</td>
<td>{{a.price}}</td>
<td><button ng-click="num(-1,$index)">-</button>
<input style="width: 30px;" ng-model="a.count" />
<button ng-click="num(1,$index)">+</button></td>
<td>{{a.type}}</td>
<td>{{a.price*a.count}}</td>
<!--根据商品名称进行删除 根据商品名称修改-->
<td><button ng-click="del(a.name)" style="width: 50px;">删除</button>
<button ng-click="xiugai1(a.name)" style="width: 50px;">修改</button>
</td>
</tr>
</table>
<p style="margin-left: 600px;">总计：{{sum()}}</p>
<p style="margin-left: 600px;">数量：{{shu()}}</p>
<button style="margin-left: 600px;" ng-click="empty()">清空</button>
<!--添加新用户-->
<button style=" background-color: #008000; margin: 6px; color: #FFFFFF;" ng-click="m=true">新增用户</button>
<div style="width: 1000px;border: 1px solid greenyellow;" ng-show="m">
用户名:<input ng-model="tname"/>
数量：<input type="number" ng-model="tcount"/>
价格:<input type="number" ng-model="tprice"/>
类型:<input ng-model="ttype"/>
<button ng-click="insert(m=false)">添加</button>
</div>
<!--修改的表格-->
<div style="width: 180px;border: 1px solid #000000; height: 250px; margin-left: 490px;" ng-show="fsf">
<div style="margin: 0 auto;">
<h2 style="margin-left: 30px;">修改商品</h2>
<input placeholder="商品名称" ng-model="u2name" />
<input placeholder="商品价格 " ng-model="price2 "/>
<input placeholder="商品数量 " ng-model="count2" />
<input placeholder="商品类型" ng-model="type2" /><br />
<button ng-click="xiugai2()">修改</button>
</div>
</div>
<td>{{a.price*a.count}}</td>
<!--根据商品名称进行删除 根据商品名称修改-->
<td><button ng-click="del(a.name)" style="width: 50px;">删除</button>
<button ng-click="xiugai1(a.name)" style="width: 50px;">修改</button>
</td>
</tr>
</table>
<p style="margin-left: 600px;">总计：{{sum()}}</p>
<p style="margin-left: 600px;">数量：{{shu()}}</p>
<button style="margin-left: 600px;" ng-click="empty()">清空</button>
<!--添加新用户-->
<button style=" background-color: #008000; margin: 6px; color: #FFFFFF;" ng-click="m=true">新增用户</button>
<div style="width: 1000px;border: 1px solid greenyellow;" ng-show="m">
用户名:<input ng-model="tname"/>
数量：<input type="number" ng-model="tcount"/>
价格:<input type="number" ng-model="tprice"/>
类型:<input ng-model="ttype"/>
<button ng-click="insert(m=false)">添加</button>
</div>
<!--修改的表格-->
<div style="width: 180px;border: 1px solid #000000; height: 250px; margin-left: 490px;" ng-show="fsf">
<div style="margin: 0 auto;">
<h2 style="margin-left: 30px;">修改商品</h2>
<input placeholder="商品名称" ng-model="u2name" />
<input placeholder="商品价格 " ng-model="price2 "/>
<input placeholder="商品数量 " ng-model="count2" />
<input placeholder="商品类型" ng-model="type2" /><br />
<button ng-click="xiugai2()">修改</button>
</div>
</div>
</body>
</html>