angular 增删改查（全部删，价格段，框排序，+-，小计，总价）
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script>
var app = angular.module("myapp", []);
//模拟数据
app.controller("my", function($scope) {
//点击保存让from表单消失
$scope.add = false;
//模拟的四条数据
$scope.user = [{
"id": 2001,
"shangpinming": "iphoneX",
"yonghuming": "张三",
"shoujiming": 13256895482,
"jiageming": 9999,
"shuliangming": 2,
"chengshiming": "北京",
"xiadanming": new Date(),
"state": "已发货"
}, {
"id": 3006,
"shangpinming": "iphone6",
"yonghuming": "李四",
"shoujiming": 13215684213,
"jiageming": 3000,
"shuliangming": 3,
"chengshiming": "北京",
"xiadanming": new Date(),
"state": "已发货"
}, {
"id": 5312,
"shangpinming": "iphone7",
"yonghuming": "王五",
"shoujiming": 15845698725,
"jiageming": 6666,
"shuliangming": 1,
"chengshiming": "上海",
"xiadanming": new Date(),
"state": "发货"
}, {
"id": 2113,
"shangpinming": "iphone8",
"yonghuming": "赵六",
"shoujiming": 11259634725,
"jiageming": 8888,
"shuliangming": 2,
"chengshiming": "安徽",
"xiadanming": new Date(),
"state": "发货"
}];
//按照价格段查询
//jiagecha 就是：价格段排序的名字
$scope.jiagecha = "";
//jiage是在数组定义的
$scope.jiage = function(item) {
if($scope.jiagecha != "--请输选择--") {
var arr = $scope.jiagecha.split("-");
var min = arr[0];
var max = arr[1];
//jiageming：以什么排序就需要排序
if(item.jiageming > max || item.jiageming < min) {
return false;
} else {
return true;
}
} else {
return true;
}
};
//批量删除
$scope.delpi = function() {
var b = false; //默认么有选中的
for(var i = 0; i < $scope.user.length; i++) {
if($scope.user[i].shan == true) {
b = true;
break;
}
}
//执行删除操作
if(b == true) {
for(var i = 0; i < $scope.user.length; i++) {
if($scope.user[i].shan == true) {
$scope.user.splice(i, 1);
i--; //删除后,下次依然从当前索引开始
}
}
} else {
alert("请选择后操作");
}
var app = angular.module("myapp", []);
//模拟数据
app.controller("my", function($scope) {
//点击保存让from表单消失
$scope.add = false;
//模拟的四条数据
$scope.user = [{
"id": 2001,
"shangpinming": "iphoneX",
"yonghuming": "张三",
"shoujiming": 13256895482,
"jiageming": 9999,
"shuliangming": 2,
"chengshiming": "北京",
"xiadanming": new Date(),
"state": "已发货"
}, {
"id": 3006,
"shangpinming": "iphone6",
"yonghuming": "李四",
"shoujiming": 13215684213,
"jiageming": 3000,
"shuliangming": 3,
"chengshiming": "北京",
"xiadanming": new Date(),
"state": "已发货"
}, {
"id": 5312,
"shangpinming": "iphone7",
"yonghuming": "王五",
"shoujiming": 15845698725,
"jiageming": 6666,
"shuliangming": 1,
"chengshiming": "上海",
"xiadanming": new Date(),
"state": "发货"
}, {
"id": 2113,
"shangpinming": "iphone8",
"yonghuming": "赵六",
"shoujiming": 11259634725,
"jiageming": 8888,
"shuliangming": 2,
"chengshiming": "安徽",
"xiadanming": new Date(),
"state": "发货"
}];
//按照价格段查询
//jiagecha 就是：价格段排序的名字
$scope.jiagecha = "";
//jiage是在数组定义的
$scope.jiage = function(item) {
if($scope.jiagecha != "--请输选择--") {
var arr = $scope.jiagecha.split("-");
var min = arr[0];
var max = arr[1];
//jiageming：以什么排序就需要排序
if(item.jiageming > max || item.jiageming < min) {
return false;
} else {
return true;
}
} else {
return true;
}
};
//批量删除
$scope.delpi = function() {
var b = false; //默认么有选中的
for(var i = 0; i < $scope.user.length; i++) {
if($scope.user[i].shan == true) {
b = true;
break;
}
}
//执行删除操作
if(b == true) {
for(var i = 0; i < $scope.user.length; i++) {
if($scope.user[i].shan == true) {
$scope.user.splice(i, 1);
i--; //删除后,下次依然从当前索引开始
}
}
} else {
alert("请选择后操作");
}
}
//全部删除
$scope.delall = function() {
$scope.user = [];
//全部删除，把表格也清除
/*$(function(){
$("table").hide();
})*/
}
//添加
$scope.baocun = function() {
//判断，验证
//ID
var ids = $(".id").val();
if(ids == null || ids == "") {
$(".t_id").text("ID不能为空");
$(".id").css("border-color", "red");
return;
} else {
$(".t_id").text("");
$(".id").css("border-color", "black");
//全部删除
$scope.delall = function() {
$scope.user = [];
//全部删除，把表格也清除
/*$(function(){
$("table").hide();
})*/
}
//添加
$scope.baocun = function() {
//判断，验证
//ID
var ids = $(".id").val();
if(ids == null || ids == "") {
$(".t_id").text("ID不能为空");
$(".id").css("border-color", "red");
return;
} else {
$(".t_id").text("");
$(".id").css("border-color", "black");
}
//商品名
var ids = $(".shangpinming").val();
if(ids == undefined || ids == "") {
$(".t_shangpinming").text("商品名不能为空");
$(".shangpinming").css("border-color", "red");
return;
} else {
$(".t_shangpinming").text("");
$(".shangpinming").css("border-color", "black");
}
//用户名
var ids = $(".yonghuming").val();
if(ids == undefined || ids == "") {
$(".t_yonghuming").text("用户名不能为空");
$(".yonghuming").css("border-color", "red");
return;
} else {
$(".t_yonghuming").text("");
$(".yonghuming").css("border-color", "black");
}
//手机号
var ids = $(".shoujiming").val();
if(ids == undefined || ids == "") {
$(".t_shoujiming").text("手机号不能为空");
$(".shoujiming").css("border-color", "red");
return;
} else {
$(".t_shoujiming").text("");
$(".shoujiming").css("border-color", "black");
}
//价格
var ids = $(".jiageming").val();
if(ids == undefined || ids == "") {
$(".t_jiageming").text("价格不能为空");
$(".jiageming").css("border-color", "red");
return;
} else {
$(".t_jiageming").text("");
$(".jiageming").css("border-color", "black");
}
//下单时间
var ids = $(".xiadanming").val();
if(ids == undefined || ids == "") {
$(".t_xiadanming").text("下单时间不能为空");
$(".xiadanming").css("border-color", "red");
return;
} else {
$(".t_xiadanming").text("");
$(".xiadanming").css("border-color", "black");
}
//状态
var ids = $(".state").val();
if(ids == undefined || ids == "") {
$(".t_state").text("状态不能为空");
$(".state").css("border-color", "red");
return;
} else {
$(".t_state").text("");
$(".state").css("border-color", "black");
}
//添加数据
var id = $scope.id;
var shangpinming = $scope.shangpinming;
var yonghuming = $scope.yonghuming;
var shoujiming = $scope.shoujiming;
var jiageming = $scope.jiageming;
var shuliangming = $scope.shuliangming;
var chengshiming = $scope.chengshiming;
var xiadanming = $scope.xiadanming;
var state = $scope.state;
$scope.user.push({
id: parseInt(id),
shangpinming: shangpinming,
yonghuming: yonghuming,
shoujiming: shoujiming,
jiageming: parseInt(jiageming),
shuliangming:parseInt(shuliangming),
chengshiming: chengshiming,
xiadanming: xiadanming,
state: state
})
//提交完输入框为空
$scope.id = "";
$scope.shangpinming = "";
$scope.yonghuming = "";
$scope.shoujiming = "";
$scope.jiageming = "";
$scope.shuliangming = "";
$scope.chengshiming = "";
$scope.xiadanming = "";
$scope.state = "";
//添加框隐藏，显示
$scope.add = false;
}
//+,-号，添加或减少
//shuliang：是在+，-定义的名字
$scope.shuliang = function(index, unm) {
$scope.user[index].shuliangming = $scope.user[index].shuliangming + unm;
if($scope.user[index].shuliangming <= 0) {
$scope.user.splice(index, 1);
}
}
//计算总价
$scope.zonghe = function() {
var sum = 0;
for(var i = 0; i < $scope.user.length; i++) {
sum += $scope.user[i].shuliangming * $scope.user[i].jiageming;
}
return sum;
}
//正倒序查
//zhengdao：是排序ng-change的名字
$scope.zhengdao = function(){
//zhengdaocha：是排序的ng-model名字
var yy = $scope.zhengdaocha;
if(yy == "1"){
$scope.aa = 'id';
$scope.bian = false;
}else if(yy == "2"){
$scope.aa = 'id';
$scope.bian = true;
}else if(yy == "3"){
$scope.aa = 'jiageming';
$scope.bian = false;
}else if(yy == "4"){
$scope.aa = 'jiageming';
$scope.bian = true;
}else if(yy == "5"){
$scope.aa = 'xiadanming';
$scope.bian = false;
}else if(yy == "6"){
$scope.aa = 'xiadanming';
$scope.bian = true;
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="my">
<!--添加，删除，查找框-->
<button ng-click="add=true" style="background-color: aqua;">新增订单</button>
<button ng-click="delpi()" style="background-color: aqua;">批量删除</button>
<button ng-click="delall()" style="background-color: aqua;">全部删除</button>
商品名称查：<input placeholder="按商品名称查" ng-model="mingchengcha" />
手机号查：<input placeholder="按手机号查" ng-model="shoujicha" />
状态发货：<select ng-model="zhuangtaicha">
<option value="">选择状态</option>
<option>发货</option>
<option>已发货</option>
</select>
<!--在上面写着呐-->
价格段排序：<select ng-model="jiagecha">
<option value="">--请输选择--</option>
<option>2500-3000</option>
<option>3000-7000</option>
<option>7000-8888</option>
<option>8888-10000</option>
</select>
排序：<select ng-model="zhengdaocha" ng-change="zhengdao()">
<option value="">---请选择排序方式---</option>
<option value="1">以ID正序排序</option>
<option value="2">以ID倒序排序</option>
<option value="3">以价格正序排序</option>
<option value="4">以价格倒序排序</option>
<option value="5">以下单时间正序排序</option>
<option value="6">以下单时间倒序排序</option>
</select>
<table border="1" style="margin-top: 10px;">
<!--第一行的表头-->
<tr>
<td>
<input type="checkbox" ng-model="quanxuan" />
</td>
<td>ID<button ng-click="aa='id';bian=!bian" style="background-color: #00FFFF;">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="aa='jiageming';bian=!bian" style="background-color: #00FFFF;">排序</button></td>
<td>数量</td>
<td>城市</td>
<td>下单时间<button ng-click="aa='xiadanming';bian=!bian" style="background-color: #00FFFF;">排序</button></td>
<td>小计</td>
<td>状态</td>
</tr>
//商品名
var ids = $(".shangpinming").val();
if(ids == undefined || ids == "") {
$(".t_shangpinming").text("商品名不能为空");
$(".shangpinming").css("border-color", "red");
return;
} else {
$(".t_shangpinming").text("");
$(".shangpinming").css("border-color", "black");
}
//用户名
var ids = $(".yonghuming").val();
if(ids == undefined || ids == "") {
$(".t_yonghuming").text("用户名不能为空");
$(".yonghuming").css("border-color", "red");
return;
} else {
$(".t_yonghuming").text("");
$(".yonghuming").css("border-color", "black");
}
//手机号
var ids = $(".shoujiming").val();
if(ids == undefined || ids == "") {
$(".t_shoujiming").text("手机号不能为空");
$(".shoujiming").css("border-color", "red");
return;
} else {
$(".t_shoujiming").text("");
$(".shoujiming").css("border-color", "black");
}
//价格
var ids = $(".jiageming").val();
if(ids == undefined || ids == "") {
$(".t_jiageming").text("价格不能为空");
$(".jiageming").css("border-color", "red");
return;
} else {
$(".t_jiageming").text("");
$(".jiageming").css("border-color", "black");
}
//下单时间
var ids = $(".xiadanming").val();
if(ids == undefined || ids == "") {
$(".t_xiadanming").text("下单时间不能为空");
$(".xiadanming").css("border-color", "red");
return;
} else {
$(".t_xiadanming").text("");
$(".xiadanming").css("border-color", "black");
}
//状态
var ids = $(".state").val();
if(ids == undefined || ids == "") {
$(".t_state").text("状态不能为空");
$(".state").css("border-color", "red");
return;
} else {
$(".t_state").text("");
$(".state").css("border-color", "black");
}
//添加数据
var id = $scope.id;
var shangpinming = $scope.shangpinming;
var yonghuming = $scope.yonghuming;
var shoujiming = $scope.shoujiming;
var jiageming = $scope.jiageming;
var shuliangming = $scope.shuliangming;
var chengshiming = $scope.chengshiming;
var xiadanming = $scope.xiadanming;
var state = $scope.state;
$scope.user.push({
id: parseInt(id),
shangpinming: shangpinming,
yonghuming: yonghuming,
shoujiming: shoujiming,
jiageming: parseInt(jiageming),
shuliangming:parseInt(shuliangming),
chengshiming: chengshiming,
xiadanming: xiadanming,
state: state
})
//提交完输入框为空
$scope.id = "";
$scope.shangpinming = "";
$scope.yonghuming = "";
$scope.shoujiming = "";
$scope.jiageming = "";
$scope.shuliangming = "";
$scope.chengshiming = "";
$scope.xiadanming = "";
$scope.state = "";
//添加框隐藏，显示
$scope.add = false;
}
//+,-号，添加或减少
//shuliang：是在+，-定义的名字
$scope.shuliang = function(index, unm) {
$scope.user[index].shuliangming = $scope.user[index].shuliangming + unm;
if($scope.user[index].shuliangming <= 0) {
$scope.user.splice(index, 1);
}
}
//计算总价
$scope.zonghe = function() {
var sum = 0;
for(var i = 0; i < $scope.user.length; i++) {
sum += $scope.user[i].shuliangming * $scope.user[i].jiageming;
}
return sum;
}
//正倒序查
//zhengdao：是排序ng-change的名字
$scope.zhengdao = function(){
//zhengdaocha：是排序的ng-model名字
var yy = $scope.zhengdaocha;
if(yy == "1"){
$scope.aa = 'id';
$scope.bian = false;
}else if(yy == "2"){
$scope.aa = 'id';
$scope.bian = true;
}else if(yy == "3"){
$scope.aa = 'jiageming';
$scope.bian = false;
}else if(yy == "4"){
$scope.aa = 'jiageming';
$scope.bian = true;
}else if(yy == "5"){
$scope.aa = 'xiadanming';
$scope.bian = false;
}else if(yy == "6"){
$scope.aa = 'xiadanming';
$scope.bian = true;
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="my">
<!--添加，删除，查找框-->
<button ng-click="add=true" style="background-color: aqua;">新增订单</button>
<button ng-click="delpi()" style="background-color: aqua;">批量删除</button>
<button ng-click="delall()" style="background-color: aqua;">全部删除</button>
商品名称查：<input placeholder="按商品名称查" ng-model="mingchengcha" />
手机号查：<input placeholder="按手机号查" ng-model="shoujicha" />
状态发货：<select ng-model="zhuangtaicha">
<option value="">选择状态</option>
<option>发货</option>
<option>已发货</option>
</select>
<!--在上面写着呐-->
价格段排序：<select ng-model="jiagecha">
<option value="">--请输选择--</option>
<option>2500-3000</option>
<option>3000-7000</option>
<option>7000-8888</option>
<option>8888-10000</option>
</select>
排序：<select ng-model="zhengdaocha" ng-change="zhengdao()">
<option value="">---请选择排序方式---</option>
<option value="1">以ID正序排序</option>
<option value="2">以ID倒序排序</option>
<option value="3">以价格正序排序</option>
<option value="4">以价格倒序排序</option>
<option value="5">以下单时间正序排序</option>
<option value="6">以下单时间倒序排序</option>
</select>
<table border="1" style="margin-top: 10px;">
<!--第一行的表头-->
<tr>
<td>
<input type="checkbox" ng-model="quanxuan" />
</td>
<td>ID<button ng-click="aa='id';bian=!bian" style="background-color: #00FFFF;">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="aa='jiageming';bian=!bian" style="background-color: #00FFFF;">排序</button></td>
<td>数量</td>
<td>城市</td>
<td>下单时间<button ng-click="aa='xiadanming';bian=!bian" style="background-color: #00FFFF;">排序</button></td>
<td>小计</td>
<td>状态</td>
</tr>
<!--添加的数据-->
<tr ng-repeat="i in user | filter:{'shangpinming':mingchengcha,'shoujiming':shoujicha,'state':zhuangtaicha} |filter:jiage |orderBy:aa:bian">
<td>
<input type="checkbox" ng-checked="quanxuan" ng-model="i.shan" />
</td>
<td>{{i.id}}</td>
<td>{{i.shangpinming}}</td>
<td>{{i.yonghuming}}</td>
<td>{{i.shoujiming}}</td>
<td>{{i.jiageming | currency:"¥"}}</td>
<td>
<input ng-model="i.shuliangming" />
<button ng-click="shuliang($index,+1)">+</button>
<button ng-click="shuliang($index,-1)">-</button>
</td>
<td>{{i.chengshiming}}</td>
<td>{{i.xiadanming |date:"MM-dd hh:mm:ss"}}</td>
<td>{{i.jiageming * i.shuliangming}}</td>
<td>
<span ng-show="i.state=='已发货'" style="background-color: #00FFFF;">{{i.state}}</span>
<span ng-show="i.state=='发货'"><a href="#"ng-click="i.state='已发货'" style="background-color: yellow;">{{i.state}}</a></span>
</td>
</tr>
<tr>
<td colspan="3">总价：</td>
<td colspan="8">{{zonghe() | currency:"¥"}}</td>
</tr>
</table>
<!--添加的表单-->
<fieldset style="margin-top: 20px;">
<form ng-show="add" style="margin-top: 20px;">
ID：<input type="text" ng-model="id" class="id" />
<span class="t_id" style="color: red;"></span><br />
商品名:<input type="text" ng-model="shangpinming" class="shangpinming" />
<span class="t_shangpinming" style="color: red;"></span><br />
用户名:<input type="text" ng-model="yonghuming" class="yonghuming" />
<span class="t_yonghuming" style="color: red;"></span><br />
手机号:<input type="text" ng-model="shoujiming" class="shoujiming" />
<span class="t_shoujiming" style="color: red;"></span><br />
价格:<input type="text" ng-model="jiageming" class="jiageming" />
<span class="t_jiageming" style="color: red;"></span><br />
数量：<input type="text" ng-model="shuliangming" /><br />
城市:<select ng-model="chengshiming">
<option>---请选择城市---</option>
<option>北京</option>
<option>上海</option>
<option>安徽</option>
</select><br />
下单时间:<input type="date" ng-model="xiadanming" class="xiadanming" />
<span class="t_xiadanming" style="color: red;"></span><br />
状态：<input type="text" ng-model="state" class="state" />
<span class="t_state" style="color: red;"></span><br />
<button type="button" ng-click="baocun()">保存</button>
</form>
</fieldset>
</body>
</html>
<fieldset style="margin-top: 20px;">
<form ng-show="add" style="margin-top: 20px;">
ID：<input type="text" ng-model="id" class="id" />
<span class="t_id" style="color: red;"></span><br />
商品名:<input type="text" ng-model="shangpinming" class="shangpinming" />
<span class="t_shangpinming" style="color: red;"></span><br />
用户名:<input type="text" ng-model="yonghuming" class="yonghuming" />
<span class="t_yonghuming" style="color: red;"></span><br />
手机号:<input type="text" ng-model="shoujiming" class="shoujiming" />
<span class="t_shoujiming" style="color: red;"></span><br />
价格:<input type="text" ng-model="jiageming" class="jiageming" />
<span class="t_jiageming" style="color: red;"></span><br />
数量：<input type="text" ng-model="shuliangming" /><br />
城市:<select ng-model="chengshiming">
<option>---请选择城市---</option>
<option>北京</option>
<option>上海</option>
<option>安徽</option>
</select><br />
下单时间:<input type="date" ng-model="xiadanming" class="xiadanming" />
<span class="t_xiadanming" style="color: red;"></span><br />
状态：<input type="text" ng-model="state" class="state" />
<span class="t_state" style="color: red;"></span><br />
<button type="button" ng-click="baocun()">保存</button>
</form>
</fieldset>
</body>
</html>