angula简单应用---购物篮

最近在学习angular,写了一个简单的购物篮例子，分享给大家。

效果图如下：（界面比较粗糙，大家凑合着看撒）

整个界面分为两部分：

（1）展示已经选择的购物记录；

展示所有购物记录使用ng-repeat遍历items显示所有购物记录：

<div ng-repeat="item in items" class="item"><span class="common">`cart`.`count`</span><input ng-model="item.count"class="count"></input><span class="common">`cart`.`price`</span><span>{{item.price |currency}}</span> <span class="common">`cart`.`itemTotal`</span><span>{{item.price*item.count| currency}}</span><button ng-click="removeItem()"class="totalCommon">`cart`.`remove`</button>    </div>

（2）总价计算（折扣前，优惠劵，折后总价）

<div class="item" ng-show ="!cart.emptyTitle"><div class="total item"><div><span class="common">`cart`.`total`</span><span>{{total() | currency}}</span></div><div><span class="common">`cart`.`voucher`</span><span>{{voucherPrice |currency}}</span></div><div><span class="common">`cart`.`totalPrice`</span><span>{{totalPrice() |currency}}</span></div></div>
</div>

控制器中主要实现了一下功能：

移出某一项：

$scope.removeItem = function(){$scope.items.splice(this.$index, 1);if($scope.items.length === 0)//当没有购物记录时，提示“您的购物篮记录为空，赶紧购物吧！”{$scope.cart.emptyTitle = true;}}

计算折扣前的总价：

$scope.total = function() {var total = 0.0;for(i = 0; i < $scope.items.length; i++){var tempItem = $scope.items[i];total = total + tempItem.price*tempItem.count;}return total;}

计算最终的价格：

$scope.totalPrice = function() {var tempPrice = $scope.total();var result = tempPrice;if (tempPrice > 200){result = tempPrice*0.95;}elseif (tempPrice > 500){result = tempPrice*0.80;}elseif(tempPrice > 800) {result = tempPrice*0.60;}return result - $scope.voucherPrice;}

最终的代码如下：

angularCart.html

<html ng-app = "cartApp">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style type="text/css">#cart {width: 500px;border: 2px solid;border-color: red;padding: 20px;}#title {font-style: normal;font-size: 20;font-weight: bolder;}.item {border: 1px solid;border-color: red;width: 100%;margin-bottom: 10px;padding: 5px;}.count {width: 50px;}.total {width: 40%;margin-left: 60%;}.common {font-weight: bolder;}.but {text-align: center;}.totalCommon {float: right;}
</style>
<script src="angular.min.js"></script>
</head>
<body ng-controller="cartController"><form id="cartForm"><div id="cart"><center id ="title">`cart`.`title`</center><div  class="item"ng-show ="cart.emptyTitle">`cart`.`isEmpty`<a href="http://www.jd.com/">走你</a></div><div ng-repeat="item initems" class="item"><span class="common">`cart`.`count`</span><input ng-model="item.count"class="count"></input><span class="common">`cart`.`price`</span><span>{{item.price | currency}}</span> <span class="common">`cart`.`itemTotal`</span><span>{{item.price*item.count | currency}}</span><button ng-click="removeItem()"class="totalCommon">`cart`.`remove`</button>    </div><div class="item" ng-show="!cart.emptyTitle"><div class="totalitem"><div><span class="common">`cart`.`total`</span><span>{{total() | currency}}</span></div><div><span class="common">`cart`.`voucher`</span><span>{{voucherPrice |currency}}</span></div><div><span class="common">`cart`.`totalPrice`</span><span>{{totalPrice() |currency}}</span></div></div></div>  <div class="but"><button ng-click="submit()">`cart`.`submit`</button>  <button ng-click="cancel()">`cart`.`cancel`</button>    </div>            </div></form>
<script src="angularScript_cart.js"></script>
</body>
</html>

angularScript_cart.js

var cartApp = angular.module("cartApp", []);
cartApp.controller("cartController", function($scope)
{$scope.cart = {title:"购物篮",price:"单价：", count:"数量：",itemTotal:"该项总计：", remove:"取消该项",isEmpty:"您的购物篮记录为空，赶紧购物吧！",emptyTitle:false,total:"总价：",voucher:"优惠劵：",totalPrice:"实际应付：",cancel:"取消",submit:"提交"}$scope.voucherPrice = 50;$scope.items = [{price:88.8,count:8}, {price:20.0,count:6}, {price:48.6, count:10},{price:80.0,count:1}];$scope.removeItem = function(){$scope.items.splice(this.$index, 1);if($scope.items.length === 0){$scope.cart.emptyTitle = true;}}$scope.total = function() {var total = 0.0;for(i = 0; i < $scope.items.length; i++){var tempItem = $scope.items[i];total = total + tempItem.price*tempItem.count;}return total;}$scope.totalPrice = function() {var tempPrice = $scope.total();var result = tempPrice;if (tempPrice > 200){result = tempPrice*0.95;}elseif (tempPrice > 500){result = tempPrice*0.80;}elseif(tempPrice > 800) {result = tempPrice*0.60;}return result - $scope.voucherPrice;}
})

转载于:https://blog.51cto.com/shuizhongyue/1615832

angula简单应用---购物篮相关推荐

数据挖掘算法之-关联规则挖掘(Association Rule)（购物篮分析）
在各种数据挖掘算法中,关联规则挖掘算是比较重要的一种,尤其是受购物篮分析的影响,关联规则被应用到很多实际业务中,本文对关联规则挖掘做一个小的总结. 首先,和聚类算法一样,关联规则挖掘属于无监督学习方法 ...
《推荐系统笔记（十三）》购物篮分析 —— 基于关联规则的topN推荐
购物篮分析最初出现于大型零售商,他们通过分析大量的发票数据,分析出购买特定商品的消费者更可能还购买哪种商品. Transactions数据集每一个这样的数据,其实就是一个消费者一次购买的商品清单,我 ...
自学笔记 - 购物篮关联分析-两两相关
一直想做购物篮分析,但是R语言做的总是理解不透,过段时间就忘记,所以想着用excel跟着做一遍是不是能理解的透彻一点. 先随便建个简单的数据集,简单就好,我自己能看的明白. 先用R写一下: 9笔交易, ...
原理 + 代码 | Apriori 算法与基于关联规则的购物篮推荐
本文的代码与数据可在公众号 " 数据分析与商业实践 " 后台回复 " 0716 " 获取,更多商业实践案例等你来撩推荐系统将成为未来十年里最重要的变革,社会化 ...
关联算法①——《啤酒与尿布》购物篮分析
关联算法系列目录: 关联算法②--Apriori算法原理及python实现关联算法③--Apriori算法实现主播关联度分析关联算法是通过支出度,置信度,提高度三个指标,寻找有相关性的商品或其它物 ...
丝芙兰(Sephora)和悦诗风吟(Innisfree)如何用“购物篮”改善顾客购物体验
Guofu 的第 36 篇文章分享 2022年第 11 篇不知道客户在想什么,你永远没有机会去改善客户的体验. 回想下去线下门店买护肤品的经历,你一定有过这样的体验.有时候逛街只是想简单地看看 ...
利用Python进行市场购物篮分析——入门篇
我们从日常生活中获取数据,大量的商业活动以及社交活动为我们提供了丰富的数据.如何从这些看似无用的数据中提取价值,这对于我们程序猿来说应该是我们的职责所在.今天就让我们用Python来进行市场购物篮的分 ...
啤酒和尿不湿？购物篮分析、商品关联分析和关联规则算法都给你搞清楚（上—理论篇）
不管是不是搞数据分析的,相信应该都听过啤酒尿不湿的故事,说的是美国的沃尔玛超市管理人员分析销售数据时发现了一个令人难以理解的现象:"啤酒"与"尿布湿"这两件看上 ...
关联规则与购物篮分析实战
导读:本文介绍了关联规则原理及Apriori算法实现购物篮分析,以一个真实案例辅助理解关联分析. 背景与需求客户A企业是一家全球知名家具和家居零售商,销售主要包括座椅/沙发系列.办公用品.卧室系列. ...

angula简单应用---购物篮

angula简单应用---购物篮相关推荐

最新文章

热门文章