表单验证+添加+查询+排序+删除
2017-12-10 20:45
288 查看
<!DOCTYPE html>
<!--
1.布局
2.定义数组，自拟4条数据
3.用ng-repeat讲数组中的数据添加到表格中
4.用filter进行搜索
5.点击按钮把未发货的状态改为已发货的状态
6.通过选中checkbox 把已发货的状态删除
7.价钱：用currercy 时间：date:'MM-dd hh:mm:ss'
8.span显示提示错误的信息 如果都不为空把信息添加到表格
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tbody tr:nth-child(odd) {
background-color: #eeeeee;
}
button {
background-color: lightskyblue;
border-radius: 4px;
border: 1px solid lightskyblue;
}
span {
color: red;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
angular.module("myapp", []).controller("demo", function($scope) {
$scope.sp = false;
$scope.zs = false;
//声明数据对象，初始化订单信息，数据自拟且不低于四条
$scope.datas = [{
"id": 2001,
"sname": "iphoneX",
"name": "张三",
"phone": 13578945632,
"price": 8699,
"city": "北京",
"date1": 1122334443,
"status": "已发货",
"check": false
}, {
"id": 3006,
"sname": "iphone6",
"name": "王红",
"phone": 18548945632,
"price": 5635,
"city": "郑州",
"date1": 0934231243,
"status": "已发货",
"check": false
},
{
"id": 5312,
"sname": "iphone7",
"name": "张三",
"phone": 17578945632,
"price": 6180,
"city": "北京",
"date1": 2225152637,
"status": "未发货",
"check": false
},
{
"id": 2132,
"sname": "iphone8",
"name": "赵强",
"phone": 17678945632,
"price": 7190,
"city": "上海",
"date1": 1123452234,
"status": "未发货",
"check": false
}
];
//用户点击”未发货”按钮时此时状态改变为已发货状态，按钮变为绿色。
$scope.aaa = function(id) {
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].id == id) {
$scope.datas[i].status = "已发货";
}
}
}
//添加数据
$scope.add = function() {
$scope.zs = true;
}
//批量删除
$scope.delAll = function() {
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].check == true && $scope.datas[i].status == "已发货") {
$scope.datas.splice(i, 1)
i--;
}
}
}
$scope.addid = "";
$scope.addname = "";
$scope.addusername = "";
$scope.addprice = "";
$scope.addtel = "";
$scope.addcity = "";
//点击保存按钮
$scope.baocun = function() {
if($scope.addid.length > 0 && $scope.addsname.length > 0 && $scope.addname.length > 0 && $scope.addprice.length > 0 && $scope.addphone.length > 0 && $scope.addcity.length > 0) {
$scope.sp = false;
$scope.zs = false;
$scope.datas.push({
id: $scope.addid,
sname: $scope.addsname,
usename: $scope.addname,
phone: $scope.addphone,
price: $scope.addprice,
city: $scope.addcity,
date1: 1205080910,
status: "未发货",
check: false
})
} else {
$scope.sp = true;
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="demo">
<!--布局-->
<div style="margin-bottom: 10px;">
<button ng-click="add()">新增订单</button>
<button ng-click="delAll()">批量删除</button>
<!--实现搜索功能-->
<input ng-model="search_sname" placeholder="按商品名称查询" />
<input ng-model="search_phone" placeholder="按手机号名称查询" />
<select ng-model="search_status">
<option value="">按状态查询</option>
<option>已发货</option>
<option>未发货</option>
</select>
</div>
<table border="1px solid black" cellpadding="1" cellspacing="0">
<!--表头-->
<thead>
<tr style="background-color: #999999;">
<td>
<input type="checkbox" />
</td>
<td>
id
<button ng-click="title='id';desc=!desc">排序</button>
</td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>
价格
<button ng-click="t
a775
itle='price';desc=!desc">排序</button>
</td>
<td>城市</td>
<td>
下单时间
<button ng-click="title='date';desc=!desc">排序</button>
</td>
<td>状态</td>
</tr>
</thead>
<!--用ng-repaet指令将对象遍历并渲染到页面中-->
<tbody>
<!--搜索-->
<tr ng-repeat="data in datas|filter:{'sname':search_sname,'phone':search_phone,'status':search_status}|orderBy:title:desc">
<td>
<input type="checkbox" ng-model="data.check" />
</td>
<td>{{data.id}}</td>
<td>{{data.sname}}</td>
<td>{{data.name}}</td>
<td>{{data.phone}}</td>
<td>{{data.price|currency:'￥:'}}</td>
<td>{{data.city}}</td>
<td>{{data.date1|date:'MM-dd hh:mm:ss'}}</td>
<td><button ng-click="aaa(data.id)">{{data.status}}</button></td>
</tr>
</tbody>
</table>
<div ng-show="zs">
ID<input ng-model="addid" /><span ng-show="sp"> id不能为空</span><br /> 商品名
<input ng-model="addname" /><span ng-show="sp"> 商品名不能为空</span><br /> 用户名
<input ng-model="addsname" /><span ng-show="sp"> 用户名名不能为空</span><br /> 手机号
<input ng-model="addphone" /><span ng-show="sp"> 手机号不能为空</span><br /> 价格
<input ng-model="addprice" /><span ng-show="sp"> 价格不能为空</span><br /> 城市
<select ng-model="addcity">
<option value="">请选择城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select><span ng-show="sp"> 城市必须选择</span><br />
<button ng-click="baocun()">保存</button>
</div>
</body>
</html>
<!--
1.布局
2.定义数组，自拟4条数据
3.用ng-repeat讲数组中的数据添加到表格中
4.用filter进行搜索
5.点击按钮把未发货的状态改为已发货的状态
6.通过选中checkbox 把已发货的状态删除
7.价钱：用currercy 时间：date:'MM-dd hh:mm:ss'
8.span显示提示错误的信息 如果都不为空把信息添加到表格
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tbody tr:nth-child(odd) {
background-color: #eeeeee;
}
button {
background-color: lightskyblue;
border-radius: 4px;
border: 1px solid lightskyblue;
}
span {
color: red;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
angular.module("myapp", []).controller("demo", function($scope) {
$scope.sp = false;
$scope.zs = false;
//声明数据对象，初始化订单信息，数据自拟且不低于四条
$scope.datas = [{
"id": 2001,
"sname": "iphoneX",
"name": "张三",
"phone": 13578945632,
"price": 8699,
"city": "北京",
"date1": 1122334443,
"status": "已发货",
"check": false
}, {
"id": 3006,
"sname": "iphone6",
"name": "王红",
"phone": 18548945632,
"price": 5635,
"city": "郑州",
"date1": 0934231243,
"status": "已发货",
"check": false
},
{
"id": 5312,
"sname": "iphone7",
"name": "张三",
"phone": 17578945632,
"price": 6180,
"city": "北京",
"date1": 2225152637,
"status": "未发货",
"check": false
},
{
"id": 2132,
"sname": "iphone8",
"name": "赵强",
"phone": 17678945632,
"price": 7190,
"city": "上海",
"date1": 1123452234,
"status": "未发货",
"check": false
}
];
//用户点击”未发货”按钮时此时状态改变为已发货状态，按钮变为绿色。
$scope.aaa = function(id) {
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].id == id) {
$scope.datas[i].status = "已发货";
}
}
}
//添加数据
$scope.add = function() {
$scope.zs = true;
}
//批量删除
$scope.delAll = function() {
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].check == true && $scope.datas[i].status == "已发货") {
$scope.datas.splice(i, 1)
i--;
}
}
}
$scope.addid = "";
$scope.addname = "";
$scope.addusername = "";
$scope.addprice = "";
$scope.addtel = "";
$scope.addcity = "";
//点击保存按钮
$scope.baocun = function() {
if($scope.addid.length > 0 && $scope.addsname.length > 0 && $scope.addname.length > 0 && $scope.addprice.length > 0 && $scope.addphone.length > 0 && $scope.addcity.length > 0) {
$scope.sp = false;
$scope.zs = false;
$scope.datas.push({
id: $scope.addid,
sname: $scope.addsname,
usename: $scope.addname,
phone: $scope.addphone,
price: $scope.addprice,
city: $scope.addcity,
date1: 1205080910,
status: "未发货",
check: false
})
} else {
$scope.sp = true;
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="demo">
<!--布局-->
<div style="margin-bottom: 10px;">
<button ng-click="add()">新增订单</button>
<button ng-click="delAll()">批量删除</button>
<!--实现搜索功能-->
<input ng-model="search_sname" placeholder="按商品名称查询" />
<input ng-model="search_phone" placeholder="按手机号名称查询" />
<select ng-model="search_status">
<option value="">按状态查询</option>
<option>已发货</option>
<option>未发货</option>
</select>
</div>
<table border="1px solid black" cellpadding="1" cellspacing="0">
<!--表头-->
<thead>
<tr style="background-color: #999999;">
<td>
<input type="checkbox" />
</td>
<td>
id
<button ng-click="title='id';desc=!desc">排序</button>
</td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>
价格
<button ng-click="t
a775
itle='price';desc=!desc">排序</button>
</td>
<td>城市</td>
<td>
下单时间
<button ng-click="title='date';desc=!desc">排序</button>
</td>
<td>状态</td>
</tr>
</thead>
<!--用ng-repaet指令将对象遍历并渲染到页面中-->
<tbody>
<!--搜索-->
<tr ng-repeat="data in datas|filter:{'sname':search_sname,'phone':search_phone,'status':search_status}|orderBy:title:desc">
<td>
<input type="checkbox" ng-model="data.check" />
</td>
<td>{{data.id}}</td>
<td>{{data.sname}}</td>
<td>{{data.name}}</td>
<td>{{data.phone}}</td>
<td>{{data.price|currency:'￥:'}}</td>
<td>{{data.city}}</td>
<td>{{data.date1|date:'MM-dd hh:mm:ss'}}</td>
<td><button ng-click="aaa(data.id)">{{data.status}}</button></td>
</tr>
</tbody>
</table>
<div ng-show="zs">
ID<input ng-model="addid" /><span ng-show="sp"> id不能为空</span><br /> 商品名
<input ng-model="addname" /><span ng-show="sp"> 商品名不能为空</span><br /> 用户名
<input ng-model="addsname" /><span ng-show="sp"> 用户名名不能为空</span><br /> 手机号
<input ng-model="addphone" /><span ng-show="sp"> 手机号不能为空</span><br /> 价格
<input ng-model="addprice" /><span ng-show="sp"> 价格不能为空</span><br /> 城市
<select ng-model="addcity">
<option value="">请选择城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select><span ng-show="sp"> 城市必须选择</span><br />
<button ng-click="baocun()">保存</button>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery table表格添加删除数据（含批量删除，全选全不选和简单的表单验证）
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- jquery表单验证添加到表格再删除easyNew
- 表单验证+二级联动+添加+全选/反选+删除
- jQuery表单验证添加数据删除数据
- jQuery表单验证和添加表格 删除修改
- 2016/05/13 thinkphp 3.2.2 ① 数据删除及执行原生sql语句 ②表单验证
- 为html表单域添加属性实现表单的javascript验证
- 二级联动实现省市表单添加删除操作
- Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
- thinkPHP自动验证、自动添加及表单错误问题分析
- validate 表单验证 添加图片(image)
- 一步步学习微软InfoPath2010和SP2010--第五章节--添加逻辑和规则到表单（2）--处理验证与格式化
- javascript对talbe进行动态添加、删除、验证实现代码
- 添加修改 + 表单验证
- 动态添加删除表单
- 添加验证，根据状态删除
- 一步步学习微软InfoPath2010和SP2010--第五章节--添加逻辑和规则到表单（2）--处理验证与格式化
- Yii中为表单添加必填字段域验证
- jquery validate 插件动态添加删除验证规则