angularjs 实现简单的快递页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 1600px;
margin: 0 auto;
margin-top: 50px;
text-align: center;
}
table {
width: 1000px;
margin: auto;
margin-top: 50px;
}
div {
margin: auto;
margin-top: 20px;
width: 500px;
height: 500px;
background: #c0a16b;
}
.b {
background: red;
width: 200px;
height: 200px;
}
button {
background: #2aabd2;
}
.red {
border: 1px solid red;
}
</style>
<script type="text/javascript" src="../Angularjs/angular.js" ></script>
<script>
var myapp = angular.module("myapp", []);
myapp.controller("myCtrl", function($scope) {
$scope.data = [{
done: false,
sname: "iPhone4",
name: "张三",
phone: "15111111111",
price: 4999,
city: "北京",
time: "08-01 10:00",
zhuai: "发货"
},
{
done: false,
sname: "小米6",
name: "李四",
phone: "1522222222",
price: 2999,
city: "北京",
time: "08-02 10:00",
zhuai: "发货"
},
{
done: false,
sname: "华为P9",
name: "王五",
phone: "15333333333",
price: 3999,
city: "上海",
time: "09-03 10:00",
zhuai: "已发货"
},
{
done: false,
sname: "oppo r11",
name: "赵六",
phone: "154444444444",
price: 4999,
city: "天津",
time: "09-05 10:00",
zhuai: "已收货"
},
{
done: false,
sname: "vivo",
name: "周七",
phone: "15555555555",
price: 2999,
city: "重庆",
time: "10-04 10:00",
zhuai: "已发货"
},
]
//隐藏
$scope.show = false;
//新增订单
$scope.newD = function() {
$scope.show = true;
}
$scope.uname = "";
$scope.uphone = "";
$scope.ucity = "选择城市";
//城市查询
$scope.citys = function(item) {
if($scope.ucity != "选择城市") {
if($scope.ucity == item.city) {
return true;
} else {
return false;
}
} else {
return true;
}
}
//状态查询
$scope.uzhuai = "状态";
//城市查询
$scope.zhuais = function(item) {
if($scope.uzhuai != "状态") {
if($scope.uzhuai == item.zhuai) {
return true;
} else {
return false;
}
} else {
return true;
}
}
//状态变化
$scope.zhuang = function(index) {
if($scope.data[index].zhuai == "发货") {
$scope.data[index].zhuai = "已发货";
}
if($scope.data[index].zhuai == "已发货") {
$scope.data[index].zhuai = "已收货";
}
}
//排序
$scope.sortname = "";
$scope.pai = function(name) {
$scope.sortname = name;
}
//批量删除
$scope.delete = function() {
var n = 0;
for(var i = 0; i < $scope.data.length; i++) {
if($scope.data[i].done == true) {
$scope.data.splice(i, 1);
n++;
i--;
}
}
if(n == 0) {
alert("请勾选!!!");
}
}
//全选反选
$scope.check = false;
$scope.checkAll = function() {
for(var i = 0; i < $scope.data.length; i++) {
if($scope.check == true) {
$scope.data[i].done = true;
} else {
$scope.data[i].done = false;
}
}
}
//全选按钮状态
$scope.checks = function() {
var n = 0;
for(var i = 0; i < $scope.data.length; i++) {
if($scope.data[i].done == true) {
n++;
} else {
n--;
}
}
if(n == $scope.data.length) {
$scope.check = true;
} else {
$scope.check = false;
}
}
//日期之间
$scope.kai = "开始月份";
$scope.jie = "结束月份";
$scope.pan = function() {
if($scope.kai != "开始月份" && $scope.jie != "结束月份") {
//装换为int类型判断
var kai = parseInt($scope.kai);
var jie = parseInt($scope.jie);
for(var i = 0; i < $scope.data.length; i++) {
//拆分时间
var arr = $scope.data[i].time.split("-");
var da = parseInt(arr[0]);
console.log(da);
//判断
if(da >= kai && da <= jie) {
return true;
} else {
return false;
}
}
} else {
return true;
}
}
//添加新客户
$scope.newsname = "";
$scope.newname = "";
$scope.newphone = "";
$scope.b = false;
$scope.redcheck = false;
$scope.newcity = "请选择";
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minute = date.getMinutes();
var myTime = month+"-"+day+" "+hours+":"+minute;
$scope.tj = function() {
if($scope.newsname == "" || $scope.newsname.length < 6 || $scope.newsname.length > 20 || $scope.newname.length < 2 || $scope.newname > 16 || $scope.newcity == "请选择") {
$scope.b = true;
$scope.redcheck = true;
} else {
$scope.data.push({
done: false,
sname: $scope.newsname,
name: $scope.newname,
phone: $scope.newphone,
price: 1999,
city: $scope.newcity,
time: myTime,
zhuai: "发货"
})；
$scope.b =
false;
$scope.redcheck = false;
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" placeholder="用户名搜索" ng-model="uname">
<input type="text" placeholder="手机号搜索" ng-model="uphone">
<select ng-model="ucity">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select>
<select ng-model="uzhuai">
<option>状态</option>
<option>待发货</option>
<option>发货</option>
<option>已收货</option>
<option>已发货</option>
</select>
<select ng-model="kai">
<option>开始月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>-
<select ng-model="jie" ng-change="pan()">
<option>结束月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select><br/><br/><br/>
<button ng-click="newD()">新增订单</button><button ng-click="delete()">批量删除</button>
<table border="1px solide #000">
<thead>
<tr>
<th><input type="checkbox" ng-model="check" ng-click="checkAll()"></th>
<th>下标<span><button ng-click="pai('$index')">排序</button></span></th>
<th>商品名称</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<span><button ng-click="pai('price')">排序</button></span></th>
<th>城市</th>
<th>下单时间<span><button ng-click="pai('time')">排序</button></span></th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data|filter:{'name':uname}|filter:{'phone':uphone}|filter:citys|filter:zhuais|orderBy:sortname|filter:pan">
<td><input type="checkbox" ng-model="item.done" ng-click="checks()"></td>
<td>{{$index}}</td>
<td>{{item.sname}}</td>
<td>{{item.name}}</td>
<td>{{item.phone}}</td>
<td>{{item.price|currency:"￥"}}</td>
<td>{{item.city}}</td>
<td>{{item.time}}</td>
<td ng-click="zhuang($index)">{{item.zhuai}}</td>
</tr>
</tbody>
</table>
<div ng-show="show">
<h2>新增订单</h2> 商品名:
<input type="text" placeholder="6-20个字符" ng-class="{red:redcheck}" ng-model="newsname"><br/><br/> 用户名:
<input type="text" placeholder="4-16个字符" ng-class="{red:redcheck}" ng-model="newname"><br/><br/> 手机号:
<input type="text" ng-class="{red:redcheck}" ng-model="newphone"><br/><br/> 城市:
<select ng-model="newcity">
<option>请选择</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</option>
</select><br/><br/>
<div class="b" ng-show="b">
<p>商品名不能为空!</p>
<p>商品名必须是6-12个字符!</p>
<p>用户名不能为空!</p>
<p>用户名必须是4-16个字符!</p>
<p>手机号不能为空!</p>
</div>
<button ng-click="tj()">提交</button>
</div>
</body>
</html>