文章标题 商品订单
2017-10-26 10:03
239 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<style>
.a{ background-color: darkgreen; padding: 8px}
.b{ background-color: darkgreen; padding: 8px}
</style>
<script>
var app=angular.module("myAPP",['ngRoute']);
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/",{})
.when("/addOrder",{
controller:"addOrderCtrl",
templateUrl:"addOrder.html"
})
.otherwise({redirectTo:"/addOrder"});
}]);
app.controller("myCtrl",function ($scope,$location) {
$scope.users=[
{ id:1,
goodName:"iPone4",
userName:"张三",
num:154156000324,
price:4999.00,
city:"北京",
time:"08-01 10:00",
state:"发货"
},{id:2,
goodName:"小米6",
userName:"李四",
num:13681462125,
price:2999.00,
city:"北京",
time:"08-02 10:00",
state:"发货"},
{id:3,
goodName:"华为P9",
userName:"王五",
num:13681462289,
price:3999.00,
city:"上海",
time:"09-03 10:00",
state:"已发货"},
{id:4,
goodName:"OPPO Rll",
userName:"赵六",
num:15614088456,
price:2999.00,
city:"天津",
time:"09-04 10:00",
state:"已发货"},
{id:5,
goodName:"VIVO",
userName:"周七",
num:15610044352,
price:4999.00,
city:"重庆",
time:"08-01 10:00",
state:"已发货"}
];
//定义跳转方法
$scope.goToPath = function(){
$location.path("/addOrder");
}
//选择城市
$scope.sexTest = function (sex, sexsize) {
if (sexsize !== "选择城市") {
var sexs = sexsize.split("-");
if (sexs == sex){
return true;
}else{
return false;
}
}else{
return true;
}
};
//选择状态
$scope.sexTest01 = function (sex01, sexsize01) {
if (sexsize01 !== "选择状态") {
var sexs01 = sexsize01.split("-");
if (sexs01 == sex01){
return true;
}else{
return false;
}
}else{
return true;
}
};
$scope.startTime = "开始月份";
$scope.endTime = "结束月份";
//过滤时间
$scope.filterTime = function(index){
var time = $scope.users[index].time;
var month = parseInt(time.split("-")[0]);
if($scope.startTime == "开始月份" || $scope.endTime == "结束月份"){
return true;
}else{
var start = parseInt($scope.startTime);
var end = parseInt($scope.endTime);
if(month >=start && month<=end ){
return true;
}else{
return false;
}
}
}
//更改状态
$scope.changeState = function(index){
$scope.users[index].st
4000
ate = "已发货";
}
//一开始默认是全不选
$scope.checkedAll = false;
var a=0;
//正着全选
$scope.selectAll =function(){
if($scope.checkedAll){
for(var i=0;i<$scope.users.length;i++){
$scope.users[i].checkState = true;
a++;
}
}else{
for(var i=0;i<$scope.users.length;i++){
$scope.users[i].checkState = false;
a--;
}
}
};
//反着全选
$scope.selectOne = function(index){
if($scope.users[index].checkState){
a++;
}else{
a--;
}
if(a==$scope.users.length){
//如果小按钮全部选中了,就让大的全选按钮也选中
$scope.checkedAll = true;
}else{
$scope.checkedAll = false;
}
};
//批量发货点击事件
$scope.plFahuo = function(){
if(a==0){
alert("请选择要批量发货的商品!");
}else{
for(var i=0;i<$scope.users.length;i++){
if($scope.users[i].checkState){
$scope.users[i].state = "已发货";
$scope.users[i].checkState = false;
a--;
}
}
$scope.checkedAll = false;
}
};
});
//添加订单控制器
app.controller("addOrderCtrl",function($scope) {
$scope.goodName = "";
$scope.userName = "";
$scope.num = "";
$scope.city = "选择城市";
$scope.li1 = false;
$scope.li2 = false;
$scope.li3 = false;
$scope.li4 = false;
$scope.li5 = false;
$scope.li6 = false;
$scope.li7 = false;
$scope.sub = function () {
//判断商品名是否为空
if ($scope.goodName == null || $scope.goodName == "") {
$scope.li1 = true;
} else {
$scope.li1 = false;
//判断商品名是否符合格式
if ($scope.goodName.length <= 6 || $scope.goodName.length >= 20) {
alert("asf")
$scope.li2 = true;
} else {
$scope.li2 = false;
}
}
//判断用户名是否为空
if ($scope.userName == null || $scope.userName == "") {
$scope.li3 = true;
} else {
$scope.li3 = false;
//判断用户名是否符合格式
if ($scope.userName.length <= 4 || $scope.userName.length >= 16) {
$scope.li4 = true;
} else {
$scope.li4 = false;
}
}
//判断手机号是否为空
if ($scope.num == null || $scope.num == "") {
$scope.li5 = true;
} else {
$scope.li5 = false;
//判断手机号是否符合格式
alert($scope.num.length);
if ($scope.num.length == 11) {
if (isNaN($scope.num)) {
$scope.li6 = true;
} else {
$scope.li6 = false;
}
} else {
$scope.li6 = true;
}
}
//判断手机号是否符合格式
if ($scope.city == "选择城市") {
$scope.li7 = true;
} else {
$scope.li7 = false;
}
if (!$scope.li1 && !$scope.li2 && !$scope.li3 && !$scope.li4 && !$scope.li5 && !$scope.li6 && !$scope.li7) {
//全显示，格式全不正确，才能进来
//获得ID
var idMax = 0;
for (index in $scope.users) {
if ($scope.users[index].id > idMax) {
idMax = $scope.users[index].id;
}
}
//alert("添加");
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;
var order = {
id: idMax + 1,
goodName: $scope.goodName,
userName: $scope.userName,
num: $scope.num,
price: 2999.00,
city: $scope.city,
time: myTime,
state: "发货"
};
//将订单添加到数据源
$scope.users.push(order);
} else {
//
}
}
});
</script>
</head>
<body ng-app="myAPP" ng-controller="myCtrl">
<center style="margin-top: 100px">
<input ng-model="search01" type="text" placeholder="用户名搜索"/>
<input ng-model="search02" type="text" placeholder="手号搜索"/>
<select id="sex" ng-model="sexsize" ng-init="sexsize='选择城市'">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select>
<select id="sex01" ng-model="sexsize01" ng-init="sexsize01='选择状态'">
<option>选择状态</option>
<option>待发货</option>
<option>已发货</option>
<option>已收货</option>
<option>发货</option>
</select>
<select ng-model="startTime">
<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="endTime">
<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/>
<button class="a" ng-click="goToPath()">新增订单</button>
<button class="b" ng-click="plFahuo()">批量发货</button><br/><br/>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="checkedAll" ng-click="selectAll()"/></th>
<th>ID 排序</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格 排序</th>
<th>城市</th>
<th>下单时间 排序</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:{'userName':search01} | filter:{'num':search02}" ng-show="sexTest(user.city,sexsize)" ng-if="sexTest01(user.state,sexsize01)&&filterTime($index)">
<td><input type="checkbox" ng-model="user.checkState" ng-click="selectOne($index)"/></td>
<td>{{user.id}}</td>
<td>{{user.goodName}}</td>
<td>{{user.userName}}</td>
<td>{{user.num}}</td>
<td>{{user.city}}</td>
<td>{{user.price}}</td>
<td>{{user.time}}</td>
<td>
<span ng-if="user.state == '发货'"><a ng-click="changeState($index)" href="#">{{user.state}}</a></span>
<span ng-if="user.state == '已发货'">{{user.state}}</span>
<span ng-if="user.state == '已收货'">{{user.state}}</span>
</td>
</tr>
</tbody>
</table>
</center>
<!-- 添加定点页面 -->
<script type="text/ng-template" id="addOrder.html">
<center>
<h3>新增订单</h3>
商品名：<input type="text" ng-model="goodName" placeholder="6-20个字符"/><br /><br />
用户名：<input type="text" ng-model="userName" placeholder="4-16个字符"/><br /><br />
手机号：<input type="text" ng-model="num" placeholder="4-16个字符"/><br /><br />
城市：<select ng-model="city">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select><br />
<ul>
<li ng-show="li1">商品不能为空</li>
<li ng-show="li2">商品名必须是6-20个字符</li>
<li ng-show="li3">用户名不能为空</li>
<li ng-show="li4">用户名必须是4-16个字符</li>
<li ng-show="li5">手机号不能为空</li>
<li ng-show="li6">手机号格式不正确</li>
<li ng-show="li7">请选择城市</li>
</ul>
<input ng-click="sub()" type="button" value="提交"/><br />
</center>
</script>
<div ng-view>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 