<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<style type="text/css">
.main{
width: 1226px;
height: 400px;
margin: 0 auto;
background: burlywood;
}
.search{
width: 160px;
height: 20px;
border-radius: 20px;
background: no-repeat url(img/图片1_03.gif) right;
}
#button{
width: 70px;
height: 28px;
background: greenyellow;
border-radius: 5px;
border-style: none;
}
.table2{
width: 1220px;
height: 120px;
margin: 0 auto;
}
.table2 tr:nth-child(even){
background: blue;
}
.table2 tr:nth-child(odd){
background: yellowgreen;
}
.num{
width: 40px;
}
a{
text-decoration: none;
}
#btn1,#btn2{
color: white;
width: 100px;
margin-right: 88px;
border: solid red;
background: #ff3b30;
}
.ErrorColor{
border:1px solid #ff3b30;
}
.SuccessColor{
border:1px solid black;
}
.paixu{
background-color: #28a54c;
border-radius: 5px;
color: white;
border:solid #28a54c;
}
</style>
<script>
var app=angular.module("myApp",[]);
var index=1;
// 敏感词过滤
app.filter("sensitiveWord", function () {
return function (msg, flag) {
return msg.replace(flag, "*");
}
});
app.controller("myCtrl",function($scope){
$scope.indexs;
/*$scope.date=new Date();*/
$scope.data=[{
name:"云南白药",
num:1,
address:"云南",
price:19.90,
totalPrice:19.90,
checked:false,
orderstate:true,
state:false,
date:"9-01 10:10"
},{
name:"999感冒灵",
num:1,
address:"北京",
price:12.50,
totalPrice:12.50,
checked:false,
orderstate:false,
state:false,
date:"1-02 10:10"
},{
name:"感康",
num:1,
address:"河北",
price:16.60,
totalPrice:16.60,
checked:false,
orderstate:false,
state:false,
date:"1-03 10:10"
}]
/*$scope.sel="";
if($scope.sel="排序"){
$scope.sel="";
}*/
//排序
$scope.order1='name';
$scope.order2='-';
$scope.dian=function(dians){
$scope.order1=dians;
if($scope.order2==""){
$scope.order2="-";
}else{
$scope.order2="";
}
}
// 通过月份判断显示的信息
$scope.filterByMonth = function (d) {
// 判断‘是否有选择查询时间段的开始时间’条件是否成立,成立则向下继续判断
if ($scope.month_start == undefined || $scope.month_end == "") {
return true;
}
// 判断‘是否有选择查询时间段的结束时间’条件是否成立,成立则向下继续判断
if ($scope.month_start == undefined || $scope.month_end == "") {
return true;
}
// 获取到查询时间段的开始时间
var beginMonth = parseInt($scope.month_start);
// 获取到查询时间段的结束时间
var endMonth = parseInt($scope.month_end);
// 判断‘开始时间’到‘结束时间’条件是否成立,成立则向下继续判断
if (beginMonth > endMonth) {
return true;
}
// 定义判断方法:没有规定时间段时,从信息列表‘第一条信息’到‘最后一条信息’为查询条件
var month = d.date.substr(0, d.date.indexOf("-"));
// 获取到符合条件的信息
month = parseInt(month);
// 将符合条件的信息输出到界面中
return (month >= beginMonth && month <= endMonth);
};
//删除
$scope.del=function(index){
if($scope.data[index].state==true && $scope.data[index].orderstate==true){
if(window.confirm("确定要删除吗?")){
$scope.data.splice(index,1);
}
}else{
alert("请选中后删除!并且只能删除已发货的!");
}
}
//入库
$scope.addisShow=false;
$scope.add=function(){
if($scope.addisShow){
$scope.addisShow=false;
}else{
$scope.addisShow=true;
}
}
$scope.insert=function(){
$scope.c_name="";
$scope.c_number="";
$scope.c_address="";
$scope.c_price="";
$scope.flag1=false;
$scope.flag2=false;
$scope.flag3=false;
$scope.flag4=false;
if($scope.g_name=="" || $scope.g_name==null){
$scope.flag1=true;
$scope.c_name="ErrorColor";
}else if($scope.g_name.length<4 || $scope.g_name.length>20){
$scope.flag1=true;
$scope.c_name="ErrorColor";
}else{
$scope.flag1=false;
$scope.c_name="SuccessColor"
}
if($scope.g_number=="" || $scope.g_number==null){
$scope.flag2=true;
$scope.c_number="ErrorColor";
}else if(isNaN($scope.g_number)){
$scope.flag2=true;
$scope.c_number="ErrorColor"
}else{
$scope.flag2=false;
$scope.c_number="SuccessColor"
}
if($scope.g_address=="" || $scope.g_address==null){
$scope.flag3=true;
$scope.c_address="ErrorColor";
}else if($scope.g_address.length<4 || $scope.g_address.length>8){
$scope.flag3=true;
$scope.c_address="ErrorColor";
}else{
$scope.flag3=false;
$scope.c_address="SuccessColor"
}
if($scope.g_price=="" || $scope.g_price==null){
$scope.flag4=true;
$scope.c_price="ErrorColor";
}else if(isNaN($scope.g_price)){
$scope.flag4=true;
$scope.c_price="ErrorColor"
}else{
$scope.flag4=false;
$scope.c_price="SuccessColor"
}
if($scope.flag1!=true && $scope.flag2!=true && $scope.flag3!=true && $scope.flag4!=true){
$scope.data.push({
name:$scope.g_name,
num:$scope.g_number,
address:$scope.g_address,
price:$scope.g_price,
});
$scope.addisShow=false;
}else{
$(".error").css({" background-color":"#FEB6C1","font-size":"16px","color":"#93212E"});
}
$scope.g_name="";
$scope.g_number="";
$scope.g_address="";
$scope.g_price="";
}
//全选、反选
$scope.AllSelect=false;
$scope.AllSelectFun=function(){
if($scope.AllSelect){
for(index in $scope.data){
$scope.data[index].state=true;
}
}else{
for(index in $scope.data){
$scope.data[index].state=false;
}
}
}
//全不选
$scope.select=function(){
var flag=false;
for(index in $scope.data){
if(!$scope.data[index].state){
flag=true;
}
}
if(flag){
$scope.AllSelect=false;
}else{
$scope.AllSelect=true;
}
}
//减
$scope.less=function(index){
if($scope.data[index].num>1){
$scope.data[index].num--;
}else{
$scope.del(index);
}
}
//加
$scope.adds=function(index){
$scope.data[index].num++;
}
//数量输入框必须为1以上,不能为负数
$scope.change=function(index){
if($scope.data[index].num>=1){
}else{
$scope.data[index].num=1;
}
}
//总数量
$scope.Allnum=function(){
var Allnums=0;
for(var i=0; i<$scope.data.length; i++){
Allnums+=$scope.data[i].num;
}
return Allnums;
}
//总价
$scope.AlltotalPrice=function(){
var allPrice=0;
for(var i=0; i<$scope.data.length;i++){
allPrice +=$scope.data[i].num*$scope.data[i].price;
allPrice.toFixed(2);
}
return allPrice.toFixed(2);
}
//清空购物车
$scope.clear=function(){
if(window.confirm("确定要清空购物车吗?")){
$scope.data=[];
}
}
//批量删除
$scope.delselect=function(){
var selArr=[];
for(index in $scope.data){
if($scope.data[index].state){
if($scope.data[index].orderstate){
selArr.push($scope.data[index].name);
}
}
}
if(selArr.length>0){
if(window.confirm("确定要删除吗?")){
for(index1 in selArr){
for(index2 in $scope.data){
if(selArr[index1]==$scope.data[index2].name){
$scope.data.splice(index2,1);
}
}
}
}
}else{
alert("请选择!");
}
}
//修改
$scope.editisShow=false;
$scope.updata=function(index){
if($scope.editisShow){
$scope.editisShow=false;
}else{
$scope.editisShow=true;
}
$scope.gai_name=$scope.data[index].name;
$scope.gai_number=$scope.data[index].num;
$scope.gai_address=$scope.data[index].address;
$scope.gai_price=$scope.data[index].price;
indexs=index;
}
$scope.gai=function(){
$scope.c_name="";
$scope.c_number="";
$scope.c_address="";
$scope.c_price="";
$scope.flag1=false;
$scope.flag2=false;
$scope.flag3=false;
$scope.flag4=false;
if($scope.gai_name=="" || $scope.gai_name==null){
$scope.flag1=true;
$scope.c_name="ErrorColor";
}else if($scope.gai_name.length<4 || $scope.gai_name.length>20){
$scope.flag1=true;
$scope.c_name="ErrorColor";
}else{
$scope.flag1=false;
$scope.c_name="SuccessColor"
}
if($scope.gai_number=="" || $scope.gai_number==null){
$scope.flag2=true;
$scope.c_number="ErrorColor";
}else if(isNaN($scope.gai_number)){
$scope.flag2=true;
$scope.c_number="ErrorColor"
}else{
$scope.flag2=false;
$scope.c_number="SuccessColor"
}
if($scope.gai_address=="" || $scope.gai_address==null){
$scope.flag3=true;
$scope.c_address="ErrorColor";
}else if($scope.gai_address.length<4 || $scope.gai_address.length>8){
$scope.flag3=true;
$scope.c_address="ErrorColor";
}else{
$scope.flag3=false;
$scope.c_address="SuccessColor"
}
if($scope.gai_price=="" || $scope.gai_price==null){
$scope.flag4=true;
$scope.c_price="ErrorColor";
}else if(isNaN($scope.gai_price)){
$scope.flag4=true;
$scope.c_price="ErrorColor"
}else{
$scope.flag4=false;
$scope.c_price="SuccessColor"
}
if($scope.flag1!=true && $scope.flag2!=true && $scope.flag3!=true && $scope.flag4!=true){
$scope.data[indexs].name=$scope.gai_name;
$scope.data[indexs].num=parseInt($scope.gai_number);
$scope.data[indexs].address=$scope.gai_address;
$scope.data[indexs].price=$scope.gai_price;
$scope.editisShow=false;
}else{
$(".error").css({" background-color":"#FEB6C1","font-size":"16px","color":"#93212E"});
}
}
//发货状态
$scope.changeOrderState=function(d){
d.orderstate=true;
}
//购物车为空时隐藏表
$scope.showContent=function(){
if($scope.data.length>0){
return false;
}else{
return true;
}
}
});
/*function allCheckboxOne(){
var names = document.getElementsByName("checkbox");
var allcheckbox = document.getElementById("allcheckbox");
for(var i = 0; i<names.length; i++){
//当全选勾被选中时,遍历names集合,让每一个勾都设为true
if(allcheckbox.checked== true){
names[i].checked = true;
}else{
names[i].checked = false;
}
}
}
/*根据单个复选框的选择情况确定全选复选框是否被选中*/
/* function selectSingle(){
var k=0;
var oInput=document.getElementsByName("checkbox");
for (var i=0;i<oInput.length;i++){
if(oInput[i].checked==false){
k=1;
break;
}
}
if(k==0){
document.getElementById("allcheckbox").checked=true;
}
else{
document.getElementById("allcheckbox").checked=false;
}
} */
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="main">
<table>
<tr>
<td><input type="text" ng-model="search" class="search" placeholder="请输入关键字搜索"/></td>
<td><input type="text" ng-model="address" class="search" placeholder="请输入关键字搜索"/></td>
<td width="200"></td>
<td>
<select ng-model="month_start">
<option value="">开始月份</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
<td>
<select ng-model="month_end">
<option value="">结束月份</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
<td>
<select ng-model="orderStateSel">
<option value="">选择状态</option>
<option value="true">已发货</option>
<option value="false">未发货</option>
</select>
</td>
<td>
<select ng-model="sel">
<option value="">排序</option>
<option value="num">按货物数量正序排序</option>
<option value="-num">按货物数量倒序排序</option>
</select>
</td>
<td width="40"></td>
<td><button id="button" ng-click="add()" >入库</button></td>
</tr>
</table>
<div align="right">
<button ng-click="delselect()" id="btn1">批量删除</button></td>
<button ng-click="clear()" id="btn2">清空购物车</button></td>
</div>
<table ng-hide="showContent()" class="table2" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr style="background: darkgray;">
<th><input type="checkbox" ng-model="AllSelect" ng-click="AllSelectFun()" /></th>
<th>货物名称<button class="paixu" ng-click="dian('name')">排序</button></th>
<th>货物数量</th>
<th>货物产地</th>
<th>货物单价<button class="paixu" ng-click="dian('price')">排序</button></th>
<th>货物入库日期<button class="paixu" ng-click="dian('date')">排序</button></th>
<th>总价</th>
<th>操作</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in data | filter:{name:search,address:address,orderstate:orderStateSel} | filter: filterByMonth |orderBy:(order2+order1)| orderBy:sel">
<td align="center"><input type="checkbox" ng-model="d.state" ng-click="select()" /></td>
<td>{{d.name}}</td>
<td>
<button ng-click="less($index)">-</button>
<input type="number" class="num" ng-model="d.num" ng-change="change($index)"/>
<button ng-click="adds($index)">+</button></td>
<td>{{d.address}}</td>
<td>{{d.price.toFixed(2) | currency:"¥:"}}</td>
<td>{{d.date | date:"MM-dd hh:mm"}}</td>
<td>{{(d.price*d.num).toFixed(2)}}</td>
<td><button ng-click="del($index)">删除</button><button ng-click="updata($index)">修改</button></td>
<td>
<button disabled="disabled" style="background: green; border-style: none;" ng-show="d.orderstate">已发货</button>
<button style="background: yellow; border-style: none;" ng-show="!d.orderstate" ng-click="changeOrderState(d)">未发货</button>
</td>
</tr>
<tr>
<td colspan="9" align="right">
购买数量:<span>{{Allnum()}}</span>
总价为:<span ng-bind="AlltotalPrice() | currency:'¥'"></span>
</td>
</tr>
</tbody>
</table>
<fieldset style="width: 400px; margin-left: 200px; margin-top: 20px; text-align: center;" ng-show="addisShow">
<legend>入库</legend>
<form>
货物名称<input type="text" ng-model="g_name" placeholder="4-20字符" ng-class="c_name"/><span class="error" ng-show="span1">货物名称必须6-20个字符</span><br/><br/>
货物数量<input type="text" ng-model="g_number" placeholder="货物数量必须为数字" ng-class="c_number"/><span class="error" ng-show="span2">货物数量必须为数字</span><br/><br/>
货物产地<input type="text" ng-model="g_address" placeholder="4-8个字符" ng-class="c_address"/><span class="error" ng-show="span3">货物产地必须6-8个字符</span></br/><br/>
货物单价<input type="text" ng-model="g_price" placeholder="请输入货物单价" ng-class="c_price"/><span class="error" ng-show="span4">单价必须为数字</span><br/><br/>
<button ng-click="insert()" style="text-align: center;">提交</button>
</form>
</fieldset>
<fieldset style="width: 400px; margin-left: 200px; margin-top: 20px; text-align: center;" ng-show="editisShow">
<legend>修改</legend>
<form>
货物名称<input type="text" ng-model="gai_name" placeholder="6-20字符" ng-class="c_name"/><span class="error" ng-show="span1">货物名称必须6-20个字符</span><br/><br/>
货物数量<input type="text" ng-model="gai_number" placeholder="请输入货物数量" ng-class="c_number"/><span class="error" ng-show="span2">货物数量必须为数字</span><br/><br/>
货物产地<input type="text" ng-model="gai_address" placeholder="6-8个字符" ng-class="c_address"/><span class="error" ng-show="span3">货物产地必须6-8个字符</span></br/><br/>
货物单价<input type="text" ng-model="gai_price" placeholder="请输入货物单价" ng-class="c_price"/><span class="error" ng-show="span4">单价必须为数字</span><br/><br/>
<button ng-click="gai()" style="text-align: center;">提交</button>
</form>
</fieldset>
<p ng-show="showContent()" align="center" style="margin-top: 30px;">您的购物车为空,<a href="https://world.taobao.com/">去逛商场</a></p>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<style type="text/css">
.main{
width: 1226px;
height: 400px;
margin: 0 auto;
background: burlywood;
}
.search{
width: 160px;
height: 20px;
border-radius: 20px;
background: no-repeat url(img/图片1_03.gif) right;
}
#button{
width: 70px;
height: 28px;
background: greenyellow;
border-radius: 5px;
border-style: none;
}
.table2{
width: 1220px;
height: 120px;
margin: 0 auto;
}
.table2 tr:nth-child(even){
background: blue;
}
.table2 tr:nth-child(odd){
background: yellowgreen;
}
.num{
width: 40px;
}
a{
text-decoration: none;
}
#btn1,#btn2{
color: white;
width: 100px;
margin-right: 88px;
border: solid red;
background: #ff3b30;
}
.ErrorColor{
border:1px solid #ff3b30;
}
.SuccessColor{
border:1px solid black;
}
.paixu{
background-color: #28a54c;
border-radius: 5px;
color: white;
border:solid #28a54c;
}
</style>
<script>
var app=angular.module("myApp",[]);
var index=1;
// 敏感词过滤
app.filter("sensitiveWord", function () {
return function (msg, flag) {
return msg.replace(flag, "*");
}
});
app.controller("myCtrl",function($scope){
$scope.indexs;
/*$scope.date=new Date();*/
$scope.data=[{
name:"云南白药",
num:1,
address:"云南",
price:19.90,
totalPrice:19.90,
checked:false,
orderstate:true,
state:false,
date:"9-01 10:10"
},{
name:"999感冒灵",
num:1,
address:"北京",
price:12.50,
totalPrice:12.50,
checked:false,
orderstate:false,
state:false,
date:"1-02 10:10"
},{
name:"感康",
num:1,
address:"河北",
price:16.60,
totalPrice:16.60,
checked:false,
orderstate:false,
state:false,
date:"1-03 10:10"
}]
/*$scope.sel="";
if($scope.sel="排序"){
$scope.sel="";
}*/
//排序
$scope.order1='name';
$scope.order2='-';
$scope.dian=function(dians){
$scope.order1=dians;
if($scope.order2==""){
$scope.order2="-";
}else{
$scope.order2="";
}
}
// 通过月份判断显示的信息
$scope.filterByMonth = function (d) {
// 判断‘是否有选择查询时间段的开始时间’条件是否成立,成立则向下继续判断
if ($scope.month_start == undefined || $scope.month_end == "") {
return true;
}
// 判断‘是否有选择查询时间段的结束时间’条件是否成立,成立则向下继续判断
if ($scope.month_start == undefined || $scope.month_end == "") {
return true;
}
// 获取到查询时间段的开始时间
var beginMonth = parseInt($scope.month_start);
// 获取到查询时间段的结束时间
var endMonth = parseInt($scope.month_end);
// 判断‘开始时间’到‘结束时间’条件是否成立,成立则向下继续判断
if (beginMonth > endMonth) {
return true;
}
// 定义判断方法:没有规定时间段时,从信息列表‘第一条信息’到‘最后一条信息’为查询条件
var month = d.date.substr(0, d.date.indexOf("-"));
// 获取到符合条件的信息
month = parseInt(month);
// 将符合条件的信息输出到界面中
return (month >= beginMonth && month <= endMonth);
};
//删除
$scope.del=function(index){
if($scope.data[index].state==true && $scope.data[index].orderstate==true){
if(window.confirm("确定要删除吗?")){
$scope.data.splice(index,1);
}
}else{
alert("请选中后删除!并且只能删除已发货的!");
}
}
//入库
$scope.addisShow=false;
$scope.add=function(){
if($scope.addisShow){
$scope.addisShow=false;
}else{
$scope.addisShow=true;
}
}
$scope.insert=function(){
$scope.c_name="";
$scope.c_number="";
$scope.c_address="";
$scope.c_price="";
$scope.flag1=false;
$scope.flag2=false;
$scope.flag3=false;
$scope.flag4=false;
if($scope.g_name=="" || $scope.g_name==null){
$scope.flag1=true;
$scope.c_name="ErrorColor";
}else if($scope.g_name.length<4 || $scope.g_name.length>20){
$scope.flag1=true;
$scope.c_name="ErrorColor";
}else{
$scope.flag1=false;
$scope.c_name="SuccessColor"
}
if($scope.g_number=="" || $scope.g_number==null){
$scope.flag2=true;
$scope.c_number="ErrorColor";
}else if(isNaN($scope.g_number)){
$scope.flag2=true;
$scope.c_number="ErrorColor"
}else{
$scope.flag2=false;
$scope.c_number="SuccessColor"
}
if($scope.g_address=="" || $scope.g_address==null){
$scope.flag3=true;
$scope.c_address="ErrorColor";
}else if($scope.g_address.length<4 || $scope.g_address.length>8){
$scope.flag3=true;
$scope.c_address="ErrorColor";
}else{
$scope.flag3=false;
$scope.c_address="SuccessColor"
}
if($scope.g_price=="" || $scope.g_price==null){
$scope.flag4=true;
$scope.c_price="ErrorColor";
}else if(isNaN($scope.g_price)){
$scope.flag4=true;
$scope.c_price="ErrorColor"
}else{
$scope.flag4=false;
$scope.c_price="SuccessColor"
}
if($scope.flag1!=true && $scope.flag2!=true && $scope.flag3!=true && $scope.flag4!=true){
$scope.data.push({
name:$scope.g_name,
num:$scope.g_number,
address:$scope.g_address,
price:$scope.g_price,
});
$scope.addisShow=false;
}else{
$(".error").css({" background-color":"#FEB6C1","font-size":"16px","color":"#93212E"});
}
$scope.g_name="";
$scope.g_number="";
$scope.g_address="";
$scope.g_price="";
}
//全选、反选
$scope.AllSelect=false;
$scope.AllSelectFun=function(){
if($scope.AllSelect){
for(index in $scope.data){
$scope.data[index].state=true;
}
}else{
for(index in $scope.data){
$scope.data[index].state=false;
}
}
}
//全不选
$scope.select=function(){
var flag=false;
for(index in $scope.data){
if(!$scope.data[index].state){
flag=true;
}
}
if(flag){
$scope.AllSelect=false;
}else{
$scope.AllSelect=true;
}
}
//减
$scope.less=function(index){
if($scope.data[index].num>1){
$scope.data[index].num--;
}else{
$scope.del(index);
}
}
//加
$scope.adds=function(index){
$scope.data[index].num++;
}
//数量输入框必须为1以上,不能为负数
$scope.change=function(index){
if($scope.data[index].num>=1){
}else{
$scope.data[index].num=1;
}
}
//总数量
$scope.Allnum=function(){
var Allnums=0;
for(var i=0; i<$scope.data.length; i++){
Allnums+=$scope.data[i].num;
}
return Allnums;
}
//总价
$scope.AlltotalPrice=function(){
var allPrice=0;
for(var i=0; i<$scope.data.length;i++){
allPrice +=$scope.data[i].num*$scope.data[i].price;
allPrice.toFixed(2);
}
return allPrice.toFixed(2);
}
//清空购物车
$scope.clear=function(){
if(window.confirm("确定要清空购物车吗?")){
$scope.data=[];
}
}
//批量删除
$scope.delselect=function(){
var selArr=[];
for(index in $scope.data){
if($scope.data[index].state){
if($scope.data[index].orderstate){
selArr.push($scope.data[index].name);
}
}
}
if(selArr.length>0){
if(window.confirm("确定要删除吗?")){
for(index1 in selArr){
for(index2 in $scope.data){
if(selArr[index1]==$scope.data[index2].name){
$scope.data.splice(index2,1);
}
}
}
}
}else{
alert("请选择!");
}
}
//修改
$scope.editisShow=false;
$scope.updata=function(index){
if($scope.editisShow){
$scope.editisShow=false;
}else{
$scope.editisShow=true;
}
$scope.gai_name=$scope.data[index].name;
$scope.gai_number=$scope.data[index].num;
$scope.gai_address=$scope.data[index].address;
$scope.gai_price=$scope.data[index].price;
indexs=index;
}
$scope.gai=function(){
$scope.c_name="";
$scope.c_number="";
$scope.c_address="";
$scope.c_price="";
$scope.flag1=false;
$scope.flag2=false;
$scope.flag3=false;
$scope.flag4=false;
if($scope.gai_name=="" || $scope.gai_name==null){
$scope.flag1=true;
$scope.c_name="ErrorColor";
}else if($scope.gai_name.length<4 || $scope.gai_name.length>20){
$scope.flag1=true;
$scope.c_name="ErrorColor";
}else{
$scope.flag1=false;
$scope.c_name="SuccessColor"
}
if($scope.gai_number=="" || $scope.gai_number==null){
$scope.flag2=true;
$scope.c_number="ErrorColor";
}else if(isNaN($scope.gai_number)){
$scope.flag2=true;
$scope.c_number="ErrorColor"
}else{
$scope.flag2=false;
$scope.c_number="SuccessColor"
}
if($scope.gai_address=="" || $scope.gai_address==null){
$scope.flag3=true;
$scope.c_address="ErrorColor";
}else if($scope.gai_address.length<4 || $scope.gai_address.length>8){
$scope.flag3=true;
$scope.c_address="ErrorColor";
}else{
$scope.flag3=false;
$scope.c_address="SuccessColor"
}
if($scope.gai_price=="" || $scope.gai_price==null){
$scope.flag4=true;
$scope.c_price="ErrorColor";
}else if(isNaN($scope.gai_price)){
$scope.flag4=true;
$scope.c_price="ErrorColor"
}else{
$scope.flag4=false;
$scope.c_price="SuccessColor"
}
if($scope.flag1!=true && $scope.flag2!=true && $scope.flag3!=true && $scope.flag4!=true){
$scope.data[indexs].name=$scope.gai_name;
$scope.data[indexs].num=parseInt($scope.gai_number);
$scope.data[indexs].address=$scope.gai_address;
$scope.data[indexs].price=$scope.gai_price;
$scope.editisShow=false;
}else{
$(".error").css({" background-color":"#FEB6C1","font-size":"16px","color":"#93212E"});
}
}
//发货状态
$scope.changeOrderState=function(d){
d.orderstate=true;
}
//购物车为空时隐藏表
$scope.showContent=function(){
if($scope.data.length>0){
return false;
}else{
return true;
}
}
});
/*function allCheckboxOne(){
var names = document.getElementsByName("checkbox");
var allcheckbox = document.getElementById("allcheckbox");
for(var i = 0; i<names.length; i++){
//当全选勾被选中时,遍历names集合,让每一个勾都设为true
if(allcheckbox.checked== true){
names[i].checked = true;
}else{
names[i].checked = false;
}
}
}
/*根据单个复选框的选择情况确定全选复选框是否被选中*/
/* function selectSingle(){
var k=0;
var oInput=document.getElementsByName("checkbox");
for (var i=0;i<oInput.length;i++){
if(oInput[i].checked==false){
k=1;
break;
}
}
if(k==0){
document.getElementById("allcheckbox").checked=true;
}
else{
document.getElementById("allcheckbox").checked=false;
}
} */
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="main">
<table>
<tr>
<td><input type="text" ng-model="search" class="search" placeholder="请输入关键字搜索"/></td>
<td><input type="text" ng-model="address" class="search" placeholder="请输入关键字搜索"/></td>
<td width="200"></td>
<td>
<select ng-model="month_start">
<option value="">开始月份</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
<td>
<select ng-model="month_end">
<option value="">结束月份</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
<td>
<select ng-model="orderStateSel">
<option value="">选择状态</option>
<option value="true">已发货</option>
<option value="false">未发货</option>
</select>
</td>
<td>
<select ng-model="sel">
<option value="">排序</option>
<option value="num">按货物数量正序排序</option>
<option value="-num">按货物数量倒序排序</option>
</select>
</td>
<td width="40"></td>
<td><button id="button" ng-click="add()" >入库</button></td>
</tr>
</table>
<div align="right">
<button ng-click="delselect()" id="btn1">批量删除</button></td>
<button ng-click="clear()" id="btn2">清空购物车</button></td>
</div>
<table ng-hide="showContent()" class="table2" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr style="background: darkgray;">
<th><input type="checkbox" ng-model="AllSelect" ng-click="AllSelectFun()" /></th>
<th>货物名称<button class="paixu" ng-click="dian('name')">排序</button></th>
<th>货物数量</th>
<th>货物产地</th>
<th>货物单价<button class="paixu" ng-click="dian('price')">排序</button></th>
<th>货物入库日期<button class="paixu" ng-click="dian('date')">排序</button></th>
<th>总价</th>
<th>操作</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in data | filter:{name:search,address:address,orderstate:orderStateSel} | filter: filterByMonth |orderBy:(order2+order1)| orderBy:sel">
<td align="center"><input type="checkbox" ng-model="d.state" ng-click="select()" /></td>
<td>{{d.name}}</td>
<td>
<button ng-click="less($index)">-</button>
<input type="number" class="num" ng-model="d.num" ng-change="change($index)"/>
<button ng-click="adds($index)">+</button></td>
<td>{{d.address}}</td>
<td>{{d.price.toFixed(2) | currency:"¥:"}}</td>
<td>{{d.date | date:"MM-dd hh:mm"}}</td>
<td>{{(d.price*d.num).toFixed(2)}}</td>
<td><button ng-click="del($index)">删除</button><button ng-click="updata($index)">修改</button></td>
<td>
<button disabled="disabled" style="background: green; border-style: none;" ng-show="d.orderstate">已发货</button>
<button style="background: yellow; border-style: none;" ng-show="!d.orderstate" ng-click="changeOrderState(d)">未发货</button>
</td>
</tr>
<tr>
<td colspan="9" align="right">
购买数量:<span>{{Allnum()}}</span>
总价为:<span ng-bind="AlltotalPrice() | currency:'¥'"></span>
</td>
</tr>
</tbody>
</table>
<fieldset style="width: 400px; margin-left: 200px; margin-top: 20px; text-align: center;" ng-show="addisShow">
<legend>入库</legend>
<form>
货物名称<input type="text" ng-model="g_name" placeholder="4-20字符" ng-class="c_name"/><span class="error" ng-show="span1">货物名称必须6-20个字符</span><br/><br/>
货物数量<input type="text" ng-model="g_number" placeholder="货物数量必须为数字" ng-class="c_number"/><span class="error" ng-show="span2">货物数量必须为数字</span><br/><br/>
货物产地<input type="text" ng-model="g_address" placeholder="4-8个字符" ng-class="c_address"/><span class="error" ng-show="span3">货物产地必须6-8个字符</span></br/><br/>
货物单价<input type="text" ng-model="g_price" placeholder="请输入货物单价" ng-class="c_price"/><span class="error" ng-show="span4">单价必须为数字</span><br/><br/>
<button ng-click="insert()" style="text-align: center;">提交</button>
</form>
</fieldset>
<fieldset style="width: 400px; margin-left: 200px; margin-top: 20px; text-align: center;" ng-show="editisShow">
<legend>修改</legend>
<form>
货物名称<input type="text" ng-model="gai_name" placeholder="6-20字符" ng-class="c_name"/><span class="error" ng-show="span1">货物名称必须6-20个字符</span><br/><br/>
货物数量<input type="text" ng-model="gai_number" placeholder="请输入货物数量" ng-class="c_number"/><span class="error" ng-show="span2">货物数量必须为数字</span><br/><br/>
货物产地<input type="text" ng-model="gai_address" placeholder="6-8个字符" ng-class="c_address"/><span class="error" ng-show="span3">货物产地必须6-8个字符</span></br/><br/>
货物单价<input type="text" ng-model="gai_price" placeholder="请输入货物单价" ng-class="c_price"/><span class="error" ng-show="span4">单价必须为数字</span><br/><br/>
<button ng-click="gai()" style="text-align: center;">提交</button>
</form>
</fieldset>
<p ng-show="showContent()" align="center" style="margin-top: 30px;">您的购物车为空,<a href="https://world.taobao.com/">去逛商场</a></p>
</div>
</body>
</html>