<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tbody tr:nth-child(even) {
background-color: pink;
}
tbody tr:nth-child(odd) {
background-color: yellow;
}
</style>
<script type="text/javascript" src="js/angularjs/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.shangpin = [{
id: 7,
name: "OPPO",
uname: "关羽",
tel: 15777777777,
price: 4999,
num: 3,
chengshi: "北京",
udate: new Date("2017-03-09 10:00"),
zhangtai: "未发货",
check: false
}, {
id: 12,
name: "VIVO",
uname: "赵云",
tel: 13333333333,
price: 2998,
num: 2,
chengshi: "上海",
udate: new Date("2017-08-22 10:00"),
zhangtai: "未发货",
check: false
}, {
id: 1,
name: "iphone8",
uname: "曹操",
tel: 1511111111,
price: 7588,
num: 6,
chengshi: "重庆",
udate: new Date("2017-09-04 10:00"),
zhangtai: "已发货",
check: false
}];
//正选反选
$scope.check = function() {
for(i in $scope.shangpin) {
$scope.shangpin[i].check = $scope.checkall;
}
}
//批量删除
$scope.delete = function() {
if(confirm("确认删除么？")) {
for(var i = 0; i < $scope.shangpin.length; i++) {
if($scope.shangpin[i].check == true) {
$scope.shangpin.splice(i, 1);
i--;
}
}
}
}
//删除
$scope.del = function($index) {
if(confirm("确认删除么？")) {
$scope.shangpin.splice($index, 1);
}
}
//隐藏输入框
$scope.add = function() {
$scope.show = !$scope.show;
}
//添加
$scope.even = function() {
var a = /米/g;
var sname = $scope.add_name.replace(a, "*");
var s = {
id: $scope.add_id,
name: sname,
uname: $scope.add_uname,
tel: $scope.add_tel,
price: $scope.add_price,
num: $scope.add_num,
chengshi: $scope.add_chengshi,
udate: $scope.add_udate,
zhangtai: $scope.add_zhangtai,
check: false
}
$scope.shangpin.push(s);
$scope.add_id = "";
$scope.add_name = "";
$scope.add_uname = "";
$scope.add_tel = "";
$scope.add_price = "";
$scope.add_num = "";
$scope.add_chengshi = "";
$scope.add_udate = "";
$scope.add_zhangtai = "";
$scope.show = false;
}
//批量发货
$scope.plfh = function() {
for(i in $scope.shangpin) {
if($scope.shangpin[i].check == true) {
$scope.shangpin[i].zhangtai = "已发货";
}
}
}
//月份
$scope.yue = function(m) {
var ss = m.getMonth() + 1;
var start = $scope.start;
var end = $scope.end;
if(start == "" || start == null) {
start = 1;
}
if(end == "" || end == null) {
end = 12;
}
if(ss >= start && ss <= end) {
return true;
} else {
return false;
}
}
$scope.zje = function() {
$scope.all = 0;
for(i in $scope.shangpin) {
$scope.all += $scope.shangpin[i].num * $scope.shangpin[i].price;
}
return $scope.all;
}
$scope.jian = function(id) {//点击减的时候，不能小于0，小于0就删除
for(i in $scope.shangpin) {
if(id == $scope.shangpin[i].id) {
if($scope.shangpin[i].num > 0) {
$scope.shangpin[i].num--;
} else {
alert("不能小于0");
if(confirm("确认删除么？")) {
$scope.shangpin.splice(i, 1);
}
}
}
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="用户名搜索" ng-model="search" />
<input type="text" placeholder="手机号搜索" ng-model="sjh" />
<select ng-model="cs">
<option value="">选择城市</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
</select>
<select ng-model="zt">
<option value="">选择状态</option>
<option>已发货</option>
<option>未发货</option>
</select>
<select ng-model="start">
<option value="">开始月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select ng-model="end">
<option value="">结束月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select ng-model="order">
<option value="">ID排序</option>
<option value="id">ID正序</option>
<option value="-id">ID倒序</option>
</select><br />
<button ng-click="add()">新增订单</button>
<button ng-click="plfh()">批量发货</button>
<button ng-click="delete()">批量删除</button>
<span>敏感字：米(商品名)->替换成*</span>
<div ng-show="show">
<input type="text" placeholder="请输入ID" ng-model="add_id" />
<input type="text" placeholder="请输入商品名" ng-model="add_name" />
<input type="text" placeholder="请输入用户名" ng-model="add_uname" />
<input type="text" placeholder="请输入手机号" ng-model="add_tel" />
<input type="text" placeholder="请输入价格" ng-model="add_price" />
<input type="text" placeholder="请输入数量" ng-model="add_num" />
<input type="text" placeholder="请输入城市" ng-model="add_chengshi" />
<input type="date" placeholder="请输入下单时间" ng-model="add_udate" />
<input type="text" placeholder="请输入状态时间" ng-model="add_zhangtai" />
<button ng-click="even()">添加</button>
</div>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="checkall" ng-click="check()" /></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>数量</th>
<th>城市</th>
<th>下单时间</th>
<th>商品小计</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pro in shangpin | filter:{uname:search,tel:sjh,chengshi:cs,zhangtai:zt} |orderBy:order" ng-show="yue(pro.udate)">
<td ng-if="">{{$index}}</td>
<td><input type="checkbox" ng-model="pro.check" ng-click="check1()" /></td>
<td>{{pro.id}}</td>
<td>{{pro.name}}</td>
<td>{{pro.uname}}</td>
<td>{{pro.tel}}</td>
<td><span ng-hide="updateshow">{{pro.price | currency:"￥"}}</span><span ng-show="updateshow"><input type="text" ng-model="pro.price" /><button ng-click="updateshow=false">保存</button></span></td>
<td><button ng-click="jian(pro.id)">-</button>{{pro.num}}<button ng-click="pro.num=pro.num+1">+</button></td>
<td>{{pro.chengshi}}</td>
<td>{{pro.udate | date:"MM-dd hh:mm"}}</td>
<td>{{pro.num*pro.price | currency:"￥"}}</td>
<td><button ng-click="pro.zhangtai='已发货'">{{pro.zhangtai}}</button></td>
<td><button ng-click="updateshow=true">修改</button><button ng-click="del($index)">删除</button></td>
</tr>
</tbody>
</table><br />
总价格:<p ng-bind="zje() | currency:'￥'"></p>
</center>
</body>
</html>