<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.gehang:nth-child(2n){
background-color: burlywood;
}
tr:hover{
background-color: yellow;
}
li{
color: red;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-2.1.0.js"></script>
<script>
angular.module("myapp", [])
.controller("democ", function($scope) {
//创建一个数组对象
$scope.order = ["请选择排序方式", "按照库存数量正序", "按照库存数量倒序"];
$scope.datas = [{
id: 2001,
name: "iphoneX",
yhm: "张三",
sjh: 1511111111111,
price: 8699+1,
cry: "北京",
xdsj: 11 - 2310001,
zt: "已发货",
state: false
}, {
id: 2002,
name: "iphone6",
yhm: "王红",
sjh: 162222222222,
price: 5696,
cry: "郑州",
xdsj: new Date('11-23 10:00:00'),
zt: "已发货",
state: false
}, {
id: 2003,
name: "iphone7",
yhm: "赵小龙",
sjh: 173333333333,
price: 6180,
cry: "北京",
xdsj: 132310003,
zt: "未发货",
state: false
}, {
id: 2004,
name: "iphone8",
yhm: "赵强",
sjh: 184444444444,
price: 7190,
cry: "上海",
xdsj:14-2010004,
zt: "未发货",
state: false
},{
id: 2005,
name: "iphone9",
yhm: "赵里",
sjh: 195555555555,
price: 12500,
cry: "山东",
xdsj:15-2010005,
zt: "未发货",
state: false
}];
//点击复选框全选
$scope.qx = function() {
var b = $scope.issk;
for(var i = 0; i < $scope.datas.length; i++) {
$scope.datas[i].state = b;
}
}
//点击订单显示数据
$scope.tj = function() {
$scope.isshow = true;
}
//保存数据提交到原始数据里
$scope.chAll = function() {
$scope.array=[];
if($scope.name==undefined || $scope.name==""){
$scope.array.push("商品名不能为空");
$("#q").css("border-color","red");
}else{
$("#q").css("border-color","");
}
if($scope.yhm==undefined || $scope.yhm==""){
$scope.array.push("用户名不能为空");
$("#w").css("border-color","red");
}else{
$("#w").css("border-color","");
}
if($scope.sjh==undefined || $scope.sjh==""){
$scope.array.push("手机号不能为空");
$("#e").css("border-color","red");
}else{
$("#e").css("border-color","");
}
if($scope.price==undefined || $scope.price==""){
$scope.array.push("价格不能为空");
$("#r").css("border-color","red");
}else{
$("#r").css("border-color","");
}
if($scope.cry==undefined || $scope.cry==""){
$scope.array.push("城市不能为空");
$("#t").css("border-color","red");
}else{
$("#t").css("border-color","");
}
if($scope.array.length==0){
$scope.datas.push({
"id":$scope.id+1,
"name":$scope.name,
"yhm":$scope.yhm,
"sjh":$scope.sjh,
"price":$scope.price,
"cry":$scope.cry,
"xdsj":new Date("yyyy-MM-dd HH:mm:ss"),
"zt":"未发货"
});
$scope.isshow=false;
}
}
//批量删除
$scope.pldel=function(){
var b=false;
for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].state==true){
b=true;
break;
}
}
if(b==true){
for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].state==true){
$scope.datas.splice(i,1);
i--;
}
}
}
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="democ">
<button ng-click="tj()" style="background-color: dodgerblue;">新增订单</button>
<button ng-click="pldel()" style="background-color: dodgerblue;">批量删除</button>
<input placeholder="按照商品名字查询" style="margin-left: 50px;" ng-model="a" />
<input placeholder="按照手机号查询" ng-model="aa" />
<select ng-model="SelectedName" ng-init="SelectedName = order[0]" ng-options="x for x in order" ng-change="change()">{{x}}</select>
<table border="1" style="width: 700px; height: 30px; margin-top: 40px;">
<tr style="background-color: darkgray;">
<th><input type="checkbox" ng-model="issk" ng-click="qx()" /></th>
<th ng-click="title='id';desc=!desc">id<button style="background-color:green;">排序</button></th>
<th >商品名</th>
<th >用户名</th>
<th>手机号</th>
<th ng-click="title='price';desc=!desc">价格<button style="background-color:green;">排序</button></th>
<th>城市</th>
<th ng-click="title='xdsj';desc=!desc" >下单时间<button style="background-color:green;">排序</button></th>
<th>状态</th>
</tr>
<!--
遍历数据
-->
<tr ng-repeat="dat in datas|filter:a|filter:aa|orderBy:title:desc" class="gehang">
<td><input type="checkbox" ng-model="dat.state" /></td>
<td>{{dat.id}}</td>
<td>{{dat.name}}</td>
<td>{{dat.yhm}}</td>
<td>{{dat.sjh}}</td>
<td>{{dat.price|currency:'¥:'}}</td>
<td>{{dat.cry}}</td>
<td>{{dat.xdsj |date:'yyyy-mm-dd hh:mm:ss'}}</td>
<td>
<span ng-show="dat.zt=='已发货'" style="background-color: green;">
{{dat.zt}}
</span>
<span ng-show="dat.zt=='未发货'" style="background-color:yellow">
<a href="#" ng-click="dat.zt='已发货'">
{{dat.zt}}
</a>
</td>
</tr>
</table>
<form style="margin-left: 300px; margin-top: 30px;" ng-show="isshow">
<tr>
商品名<input ng-model="name" id="q"/><span ng-model="o"></span><br />
用户名<input ng-model="yhm" id="w" /><br />
手机号<input ng-model="sjh" id="e"/><br />
价格为<input ng-model="price" id="r"/><br />
城市<select style="width: 170px;" ng-model="cry" id="t">
<option>---请选择城市--</option>
<option>河南</option>
<option>河北</option>
<option>山东</option>
<option>天津</option>
</select><br />
<div>
<ul>
<li ng-repeat=" a in array">{{a}}</li>
</ul>
</div>
<tr>
<button style="margin-left: 60px;" ng-click="chAll()">保存</button>
</tr>
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.gehang:nth-child(2n){
background-color: burlywood;
}
tr:hover{
background-color: yellow;
}
li{
color: red;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-2.1.0.js"></script>
<script>
angular.module("myapp", [])
.controller("democ", function($scope) {
//创建一个数组对象
$scope.order = ["请选择排序方式", "按照库存数量正序", "按照库存数量倒序"];
$scope.datas = [{
id: 2001,
name: "iphoneX",
yhm: "张三",
sjh: 1511111111111,
price: 8699+1,
cry: "北京",
xdsj: 11 - 2310001,
zt: "已发货",
state: false
}, {
id: 2002,
name: "iphone6",
yhm: "王红",
sjh: 162222222222,
price: 5696,
cry: "郑州",
xdsj: new Date('11-23 10:00:00'),
zt: "已发货",
state: false
}, {
id: 2003,
name: "iphone7",
yhm: "赵小龙",
sjh: 173333333333,
price: 6180,
cry: "北京",
xdsj: 132310003,
zt: "未发货",
state: false
}, {
id: 2004,
name: "iphone8",
yhm: "赵强",
sjh: 184444444444,
price: 7190,
cry: "上海",
xdsj:14-2010004,
zt: "未发货",
state: false
},{
id: 2005,
name: "iphone9",
yhm: "赵里",
sjh: 195555555555,
price: 12500,
cry: "山东",
xdsj:15-2010005,
zt: "未发货",
state: false
}];
//点击复选框全选
$scope.qx = function() {
var b = $scope.issk;
for(var i = 0; i < $scope.datas.length; i++) {
$scope.datas[i].state = b;
}
}
//点击订单显示数据
$scope.tj = function() {
$scope.isshow = true;
}
//保存数据提交到原始数据里
$scope.chAll = function() {
$scope.array=[];
if($scope.name==undefined || $scope.name==""){
$scope.array.push("商品名不能为空");
$("#q").css("border-color","red");
}else{
$("#q").css("border-color","");
}
if($scope.yhm==undefined || $scope.yhm==""){
$scope.array.push("用户名不能为空");
$("#w").css("border-color","red");
}else{
$("#w").css("border-color","");
}
if($scope.sjh==undefined || $scope.sjh==""){
$scope.array.push("手机号不能为空");
$("#e").css("border-color","red");
}else{
$("#e").css("border-color","");
}
if($scope.price==undefined || $scope.price==""){
$scope.array.push("价格不能为空");
$("#r").css("border-color","red");
}else{
$("#r").css("border-color","");
}
if($scope.cry==undefined || $scope.cry==""){
$scope.array.push("城市不能为空");
$("#t").css("border-color","red");
}else{
$("#t").css("border-color","");
}
if($scope.array.length==0){
$scope.datas.push({
"id":$scope.id+1,
"name":$scope.name,
"yhm":$scope.yhm,
"sjh":$scope.sjh,
"price":$scope.price,
"cry":$scope.cry,
"xdsj":new Date("yyyy-MM-dd HH:mm:ss"),
"zt":"未发货"
});
$scope.isshow=false;
}
}
//批量删除
$scope.pldel=function(){
var b=false;
for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].state==true){
b=true;
break;
}
}
if(b==true){
for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].state==true){
$scope.datas.splice(i,1);
i--;
}
}
}
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="democ">
<button ng-click="tj()" style="background-color: dodgerblue;">新增订单</button>
<button ng-click="pldel()" style="background-color: dodgerblue;">批量删除</button>
<input placeholder="按照商品名字查询" style="margin-left: 50px;" ng-model="a" />
<input placeholder="按照手机号查询" ng-model="aa" />
<select ng-model="SelectedName" ng-init="SelectedName = order[0]" ng-options="x for x in order" ng-change="change()">{{x}}</select>
<table border="1" style="width: 700px; height: 30px; margin-top: 40px;">
<tr style="background-color: darkgray;">
<th><input type="checkbox" ng-model="issk" ng-click="qx()" /></th>
<th ng-click="title='id';desc=!desc">id<button style="background-color:green;">排序</button></th>
<th >商品名</th>
<th >用户名</th>
<th>手机号</th>
<th ng-click="title='price';desc=!desc">价格<button style="background-color:green;">排序</button></th>
<th>城市</th>
<th ng-click="title='xdsj';desc=!desc" >下单时间<button style="background-color:green;">排序</button></th>
<th>状态</th>
</tr>
<!--
遍历数据
-->
<tr ng-repeat="dat in datas|filter:a|filter:aa|orderBy:title:desc" class="gehang">
<td><input type="checkbox" ng-model="dat.state" /></td>
<td>{{dat.id}}</td>
<td>{{dat.name}}</td>
<td>{{dat.yhm}}</td>
<td>{{dat.sjh}}</td>
<td>{{dat.price|currency:'¥:'}}</td>
<td>{{dat.cry}}</td>
<td>{{dat.xdsj |date:'yyyy-mm-dd hh:mm:ss'}}</td>
<td>
<span ng-show="dat.zt=='已发货'" style="background-color: green;">
{{dat.zt}}
</span>
<span ng-show="dat.zt=='未发货'" style="background-color:yellow">
<a href="#" ng-click="dat.zt='已发货'">
{{dat.zt}}
</a>
</td>
</tr>
</table>
<form style="margin-left: 300px; margin-top: 30px;" ng-show="isshow">
<tr>
商品名<input ng-model="name" id="q"/><span ng-model="o"></span><br />
用户名<input ng-model="yhm" id="w" /><br />
手机号<input ng-model="sjh" id="e"/><br />
价格为<input ng-model="price" id="r"/><br />
城市<select style="width: 170px;" ng-model="cry" id="t">
<option>---请选择城市--</option>
<option>河南</option>
<option>河北</option>
<option>山东</option>
<option>天津</option>
</select><br />
<div>
<ul>
<li ng-repeat=" a in array">{{a}}</li>
</ul>
</div>
<tr>
<button style="margin-left: 60px;" ng-click="chAll()">保存</button>
</tr>
</form>
</body>
</html>