普通 angular

最新推荐文章于 2023-02-20 16:17:39 发布

MEIMEI_BK

最新推荐文章于 2023-02-20 16:17:39 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/MEIMEI_BK/article/details/79093724

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>订单表</title>
<style>
tbody tr:nth-child(even) {
background-color: powderblue;
}

tbody tr:nth-child(odd) {
background-color: purple;
}
</style>
<script type="text/javascript" src="../js/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.isShow=false;
$scope.shuzu = [{
id: 9,
name: "榴莲",
username: "张三",
tel: 16798075889,
price: 200,
num: 2,
city: "北京",
time: new Date("2017-08-12"),
zhuangtai: "已发货",
fanxuan: false
}, {
id: 1,
name: "辣条",
username: "张二",
tel: 157940745859,
price: 5,
num: 5,
city: "北京",
time: new Date("2018-02-12"),
zhuangtai: "未发货",
fanxuan: false
}, {
id: 5,
name: "啤酒",
username: "张七",
tel: 13798075839,
price: 10,
num: 4,
city: "上海",
time: new Date("2016-08-12"),
zhuangtai: "已发货",
fanxuan: false
}, {
id: 10,
name: "炸鸡",
username: "李四",
tel: 16794075889,
price: 50,
num: 2,
city: "深圳",
time: new Date("2018-08-16"),
zhuangtai: "未发货",
fanxuan: false
}, {
id: 6,
name: "炸串",
username: "王三",
tel: 165798075889,
price: 2,
num: 8,
city: "深圳",
time: new Date(),
zhuangtai: "已发货",
fanxuan: false
}];

//1.总计
$scope.allPrice = function() {
$scope.all = 0;
for(index in $scope.shuzu) {
$scope.all = $scope.shuzu[index].price * $scope.shuzu[index].num + $scope.all;
}
return $scope.all;
}

//2.用户名搜索
$scope.soushuo = "";
//3.手机号搜索
$scope.telsoushuo = "";
//4.选择城市
$scope.selectcity = "";
//5.选择状态
$scope.selectzhuangtai = "";
//6.全选
$scope.quanxuan = function() {
for(index in $scope.shuzu) {
$scope.shuzu[index].fanxuan = $scope.qx;
}
}
//7.添加
$scope.add=function(){
var reg=/米/g;
var tihuan=$scope.add_username.replace(reg,"*");
var newid=$scope.add_id;
$scope.errors=[];
if(newid=="" || newid==undefined){
$scope.errors.push("ID不能为空");
}
if($scope.errors.length==0){
var s={
id:newid,
name:$scope.add_name,
username:tihuan,
tel:$scope.add_tel,
price:$scope.add_price,
city:$scope.add_city,
num:$scope.add_num,
time: new Date(),
zhuangtai: "已发货",
fanxuan: false
}
$scope.shuzu.push(s);
$scope.isShow=false;
}
}
//8.批量发货
$scope.piliangfahuo=function(){
if(confirm("确定要发货嘛??")){
for(var i=0; i<$scope.shuzu.length;i++){
if($scope.shuzu[i].fanxuan==true){
$scope.shuzu[i].zhuangtai="已发货";

}
}
}
}

//9.批量删除
$scope.piliangdelete=function(){
if(confirm("确定要删除嘛??")){
for(var i=0; i<$scope.shuzu.length;i++){
if($scope.shuzu[i].fanxuan==true){
$scope.shuzu.splice(i,1);
i--;
}
}
}
}

//10.删除
$scope.delete=function(id){
for(index in $scope.shuzu){
if($scope.shuzu[index].id==id){
$scope.shuzu.splice(index,1);
}
}
}

//按区间查找月份
$scope.arr=[1,2,3,4,5,6,7,8,9,10,11,12];
$scope.yue=function(d){
var m=d.getMonth()+1;
var k=$scope.kai;
var j=$scope.jie;
if(k==undefined || k==""){
k=1;
}
if(j=="" || j==undefined){
j=12;
}
if(m>=k && m<=j){
return true;
}else{
return false;
}
}
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>订单表</h3>
<select ng-model="kai">
<option value="">开始月份</option>
<option ng-repeat="a in arr">{{a}}</option>
</select>
<select ng-model="jie">
<option value="">结束月份</option>
<option ng-repeat="a in arr">{{a}}</option>
</select>
<input type="text" placeholder="用户名搜索" ng-model="soushuo" />
<input type="text" placeholder="手机号搜索" ng-model="telsoushuo" />
<select ng-model="selectcity">
<option value="">选择城市</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>

<select ng-model="selectzhuangtai">
<option value="">选择状态</option>
<option>已发货</option>
<option>未发货</option>
</select>

<select ng-model="paixu">
<option value="">ID排序</option>
<option value="id">id正序排序</option>
<option value="-id">id倒序排序</option>
</select>
<button style="background-color: green;" ng-click="isShow=true">新增订单</button>
敏感字：米替换*
<button style="background-color: green;" ng-click="piliangfahuo()">批量发货</button>
<button style="background-color: red;" ng-click="piliangdelete()">批量删除</button>
<table border="1px" width="80%" cellpadding="8" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="qx" ng-click="quanxuan()"></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 shuzu | filter:{username:soushuo}| filter:{tel:telsoushuo} | filter:{city:selectcity} | filter:{zhuangtai:selectzhuangtai} | orderBy:paixu" ng-show="yue(pro.time)">
<td><input type="checkbox" ng-model="pro.fanxuan"></td>
<td>{{pro.id}}</td>
<td>{{pro.name}}</td>
<td>{{pro.username}}</td>
<td>{{pro.tel}}</td>
<td>{{pro.price | currency:'RMB￥'}}</td>
<td>
<button ng-click="pro.num=pro.num+1">+</button>
<span ng-hide="update">{{pro.num}}</span> <span ng-show="update"><input ng-show="update" ng-model="pro.num"> <button ng-click="update=false">保存</button></span>
<button ng-click="pro.num=pro.num-1">-</button>
</td>
<td>{{pro.price * pro.num | currency:'RMB￥'}}</td>
<td>{{pro.city}}</td>
<td>{{pro.time | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>

<span ng-if="pro.zhuangtai=='已发货'">已发货</span>
<span ng-if="pro.zhuangtai=='未发货'"><a href="#" ng-click="pro.zhuangtai='已发货'">{{pro.zhuangtai}}</a></span>
</td>
<td>
<button ng-click="delete(pro.id)">删除</button>
<button ng-click="update=true">修改数量</button>
</td>
</tr>
</tbody>

<tr>
<td colspan="7">总计</td>
<td colspan="6" ng-bind="allPrice()| currency:'RMB￥'"></td>
</tr>
</table>
<div ng-show="isShow">
<h3>添加页面</h3>
<input type="text" placeholder="请输入ID" ng-model="add_id" /><br /><br />
<input type="text" placeholder="请输入商品名" ng-model="add_name" /><br /><br />
<input type="text" placeholder="请输入用户名" ng-model="add_username" /><br /><br />
<input type="text" placeholder="请输入手机号" ng-model="add_tel" /><br /><br />
<input type="text" placeholder="请输入商品价格" ng-model="add_price" /><br /><br />
<input type="text" placeholder="请输入商品数量" ng-model="add_num" /><br /><br />
<select ng-model="add_city">
<option value="">选择城市</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<br />
<button ng-click="add()">添加</button>
</div>
<p ng-show="errors.length!=0" ng-repeat="e in errors">{{e}}</p>
</center>
</body>

</html>

MEIMEI_BK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
普通 angular

订单表 tbody tr:nth-child(even) { background-color: powderblue; } tbody tr:nth-child(odd) { background-color: purple; } var app = angular.module("myApp", []); app.controller(
复制链接

扫一扫