实战之订单绑定



订单管理页面需求


1.核心:订单管理数据结构;


2.订单列表绑定。


实例代码



<!doctype html>
<html ng-app="lesson" ng-controller="lesson11">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
LESSON 11
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  #content1{padding:16px;}
  table
  {
  border-collapse:collapse;
  }
 
table,th, td
  {
  border: 1px solid black;
  vertical-align:top;
  padding:12px;
  }
 
  </style>
 
  </head>
 
  <body>
  
  
  <p ng-show="IsLoading">订单加载中...</p>
 
<div ng-show="!IsLoading">
<table>
<thead>
<tr>
<th>订单编号</th>
<th>卖家</th>
<th>商品详情</th>
<th>订单总价</th>
<th>物流状态</th>
<th>订单状态</th>
<th>下单日期</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="x in orderList">
<td>{{x.orderId}}</td>
<td>{{x.sealer}}</td>
<td>
<ul ng-repeat="p in x.products" style="border-bottom:1px solid #333;"> 
<li>{{p.name}}</li>
<li>{{p.desciption}}</li>
<li>{{p.price}}</li>
<li>{{p.oldPrice}}</li>
<li>{{p.amount}}</li>
<li>{{p.payment}}</li>
</ul>
</td>
<td>{{x.orderPayment}}</td>
<td>{{x.traffic}}</td>
<td>{{x.status}}</td>
<td>{{x.createTime}}</td>
</tr>
</tbody>
</table>
</div>
 
 
<script src="scripts/angular-1.4.6.min.js"></script>
<script>
 
 
var app = angular.module("lesson",[]);
app.controller("lesson11",function($scope){
 
$scope.orderListBase =[
{
orderId : 'GH2016032010001',
createTime: '2016-03-20 10:01',
sealer: '专营店1卖家',
traffic: '快递已取件',
status: '卖家已发货',
products:[
{name:'黑色夹克衫',
 desciption:'质量扎实,外观很潮',
 price:200.00,
 oldPrice:350.00,
 amount:1,
 payment:200.00
}
],
orderPayment:200.00
},
{
orderId : 'GH2016032010002',
createTime: '2016-03-20 12:01',
sealer: '小诗家',
traffic: '快递已派送',
status: '卖家已发货',
products:[
{name:'针织衫',
 desciption:'颜色新颖',
 price:120.00,
 oldPrice:260.00,
 amount:1,
 payment:120.00
},
{name:'棒球帽',
 desciption:'宽檐',
 price:60.00,
 oldPrice:160.00,
 amount:1,
 payment:60.00
}
],
orderPayment:180.00
},
{
orderId : 'GH2016032010003',
createTime: '2016-03-19 16:01',
sealer: '胜利家装店',
traffic: '已派送成功,用户已签收',
status: '买家已确认收货',
products:[
{name:'吸盘把手',
 desciption:'白色、耐久使用',
 price:38.00,
 oldPrice:80.00,
 amount:2,
 payment:76.00
}
],
orderPayment:76.00
}
];
 
$scope.orderList = [];
 
$scope.IsLoading = false;
$scope.LoadOrderList = function(accountId,pageSize,pageIndex){
$scope.IsLoading=true;
$scope.orderList = $scope.orderListBase;
$scope.IsLoading=false;
}
 
$scope.LoadOrderList();
});
 
</script>
 
  </body>
</html>


执行结果


page1.png



本课小结


1.定义了业务的数据结构;


2.模拟了几个订单;


3.将这些订单绑定到我们的页面。



【本文由大发二分彩—大发三分彩官方独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 tvqo.cn
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部