实战之确认下单



购买下单页面需求


1.确认下单页面数据结构;


2.购买下单第一步。


实例代码


<!doctype html>
<html ng-app="lesson" ng-controller="lesson13">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
LESSON 13
  </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;
  }
  .buyAmount{width:30px;}
  .logo{width:100px;height:100px;}
  </style>
  </head>
 
  <body>
  
  
<div>
 
<form>
 
<div ng-show="Step1IsOk!=true">
<table>
<thead>
<tr>
<th>选中</th>
<th>ID</th>
<th>名称</th>
<th>编号</th>
<th>商品图片</th>
<th>购买数量</th>
<th>价格</th>
<th>应付</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in productList">
<td><input type="checkbox" ng-model="p.selected" /></td>
<td>{{p.productId}}</td>
<td>{{p.productName}}</td>
<td>{{p.productCode}}</td>
<td><img src="{{p.logo}}"  class="logo" ></td>
<td><input type="text" ng-model="p.buyAmount" /></td>
<td><b>{{p.retailPrice}}</b> <span>{{p.oldPrice}}</span></td>
<td>{{p.payment}}</td>
</tr>
</tbody>
</table>
</div>
 
<div ng-show="Step1IsOk==true">
<ul>
<li ng-repeat="p in orderProductList">
<b>{{p.productName}}</b>,购买数量:<span>{{p.buyAmount}}</span>,应付价格:<b>{{p.payment}}</b>
</li>
</ul>
</div>
 
<button ng-click="ConfirmStep1()" >确认商品</button>

</form>
 
</div>

<script src="scripts/angular-1.4.6.min.js"></script>
<script>
 
Array.prototype.remove=function(dx)
 {
  if(isNaN(dx)||dx>this.length){return false;}
  for(var i=0,n=0;i<this.length;i++)
  {
    if(this[i]!=this[dx])
    {
      this[n++]=this[i]
    }
  }
  this.length-=1
 }
 
var app = angular.module("lesson",[]);
app.controller("lesson13",function($scope){
 
$scope.productList = [
{
productId:1,
productName:'耳机',
productCode:'P0001',
logo:'http://y.zdmimg.com/201603/26/56f5e694762045067.jpg_d200.jpg',
buyAmount:1,
retailPrice:1500,
oldPrice:1700,
payment:1500,
selected:true
},
{
productId:2,
productName:'单反相机',
productCode:'P0002',
logo:'http://ym.zdmimg.com/201603/26/56f5e989a0a4a.jpg_d200.jpg',
buyAmount:1,
retailPrice:5200,
oldPrice:6000,
payment:5200,
selected:true
},
{
productId:3,
productName:'乐高积木',
productCode:'P0003',
logo:'http://y.zdmimg.com/201603/25/56f5086b664574407.png_d200.jpg',
buyAmount:1,
retailPrice:490,
oldPrice:600,
payment:490,
selected:true
}
];
 
$scope.Step1IsOk=false;
$scope.orderProductList = [];
 
$scope.ConfirmStep1 = function(){
for(var i in $scope.productList)
{
var product = $scope.productList[i];
if(product.selected){
$scope.orderProductList.push(product);
}
}
$scope.Step1IsOk = true;
};
 
});
 
</script>
 
  </body>
</html>


执行结果


page3.png


确认商品


page4.png



本课小结


1.购买下单页面的整体需求;


2.开发前最重要的一步,确认下单页面数据结构;


3.购买下单第一步;


4.下节课将为大家介绍购买下单的第二步。



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

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

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

客服热线 400-862-8862

回到顶部