先来看看效果图：

购物车

一、代码

如果看了这个效果有兴趣想知道怎么做出来的话，那就继续往下看吧。话不多少，直接上代码。

超文本标记语言代码：

！DOCTYPE html html lang=' en ' ng-app=' cart ' head meta charset=' UTF-8 ' title购物车/title link rel='样式表href='./scripts/angular-1。4 .0-RC。2/文档/组件/引导-3。1 .1/CSS/bootstrap。量滴CSS ' link rel='样式表href=' main。CSS '/head dy ng-controller=' CartCTr ' table class=' table-hover ' ng-show=' items。' length ' captionanglarjs实现购物车/标题tr th序号/th商品信息/th单价（元)/th数量/th金额（元)/th操作/th/tr ng-repeat=' items in items ' TD { { $ index 1 } }/TD TDA href=' { { item。link URl } } ' target=' _ blank ' title='此链接将跳转到淘宝相关页面.'{ { item。title } }/a/TD TD TD class=' bold ' { item。price | number :2 } }/TD TD TD按钮类型=' button ' class=' BTN BTN-默认BTN-xs ' ng-click=' reduce(项。id)' ng-disabled='项。数量=1 '-/按钮输入类型=' text ' size=' 5 ' ng-model=' item。“数量”向下键=“数量键向下()”向上键=“数量键向上()”按钮类型删除/button/TD/tr/tablediv class=' empty ' ng-show='！"项目。长度"购物车空空，快去寻找宝贝/divdiv class='total '已选商品：span { { getquantines()} }/span合计：span class=' mark ' ng-show=' gettotallamount()' 15000 " { gettotallamount()| number :2 } }/span span class=' mark ' ng-show=' gettotallamount()=15000 " { gettotallamount()*折扣|编号33602 } } span class=' BTN BTN-xs '(9折)/span class=' discount '({ { getTotalAmount()| number :2 } })/span/span button type=' button ' class=' BTN BTN-BTN初选-sm ' ng-click=' alert submit()'结算/button/div脚本src=' http :/scripts/angular-1。4 .0-RC。2/棱角分明。js '/script script src=' http : app。js '/脚本/正文/html js代码：

/由wqq于2016年5月25日创建/var购物车模块=角度。模块(' cart '，[])；推车模块。控制器(' cart ctrl '，['$scope '，函数($ scope){ $ scope。折扣=0.9；$scope.items=[{id: 10001，title: 'Web全栈工程师的自我修养余果，价格： 40.80,数量： 2,链接网址： 'https://detail.tmall.com/item.htm？SPM=a1z0d。6639537 .1997196601 .4 .cwywjsid=532166746631 ' }，{id: 10002，title: 'MacBook Pro Retina 15英寸，价格： 16088.00,数量： 1,链接网址： 'https://detail.tmall.com/item.htm？SPM=a1z0d。6639537 .1997196601 .26 .cwywjsid=45771116847 ' }，{id: 10003，title: 'Surface Book I5 128G独显，价格： 11088.00,数量： 1,链接网址： 'https://detail.tmall.com/item.htm？SPM=a1z0d。6639537 .1997196601 .15 .cwywjsid=525614504276 ' }，{id: 10004，title: '联想Yoga3Pro I5 4G '，价格： 7299.00,数量： 1,链接网址： 'https://detail.tmall.com/item.htm？SPM=a1z0d。6639537 .1997196601 .37 .cwywjsid=41541519814 ' }]；$ scope。add=function(id){ angular。foreach($ scope)。items)、function (item、index、array){ if(item。id===id){ item。数量；} }) };$ scope。reduce=function(id){ angular。foreach($ scope)。items)、function (item、index、array){ if(item。id===id){ item。数量-；} }) };//输入框添加按键事件，避免输入非正整数$ scope。quantiykeydown=function(event){ event=event | | window。事件；var target=事件。目标| |事件。srcelelementvar键码=事件。密钥代码；if ((37=键码键码=40)||(48=键码键码=57) || (96=键码键码=105) ||键码==8) { //方向键 、数字键、退格)else { console.log(键码);事件。prevent default()；返回false } }//键盘事件，当输入数字为0时，重新刷新文本框内容$ scope。quantiykeyup=function(event){ event=event | | window。事件；var target=事件。目标| |事件。srcelelementvar键码=事件。密钥代码；if(48===键码| | 96===键码){ target。value=ParSeint(目标。值)；}};//删除商品$ scope。delete=函数(id){ $ scope。物品。foreach(函数(项，索引){ if(项。id==id){ if(确认('确定要从购物车中删除此商品？)){ $scope.items.splice(索引，1);返回；} } }) };//计算已选商品数量$ scope。getquantines=function(){ var quantines=0；angular.forEach($scope.items)，function (item，index，array){ if(item。数量){ quantings=parsent(item。数量))；} });退货数量；};//计算合计总金额$ scope。gettotalamount=function(){ var total amount=0；angular.forEach($scope.items，function (item，index，array){总金额=item。数量*项目。价格；});返回合计金额；};$ scope。警报提交=函数(){警报(' Angular实现购物车');}}]);二、分析

请忽略引导程序的样式，我们只关注棱角分明，代码很简单，我们来简单的分析一下：

1.准备

首先我们我们定义了一个手推车模块、cartCtr控制器，并将它们引入到了超文本标记语言代码中，同时我们还在射流研究…中定义了一个数组项目用于模拟购物车内的东西。

2.ng重复迭代器

为了将项目里的数据动态的遍历加载出来，我们使用有角的里的内置指令ng-重复，它可以非常方便的遍历数组，生成数字正射影像图元素，在这里循环生成了四个tr标签:

tr ng-repeat="项目中的项目"项目就是项目数组里面的某一个对象，是不是感觉这就是射流研究…中的为/在循环~~如果你是一名。网开发人员，用过ASP。网最有价值球员的剃刀就对这种其他语言无缝操作数字正射影像图元素很熟悉了，至于java、PHP是否有没有类似的语法我就不清楚了，我是一名苦逼的。网开发。

尼日利亚重复迭代器

我们可以看到第一个任务描述中用到了$索引，这是尼日利亚重复内的，并不是我们定义的，它的值是当前项目在项目中的索引，从0开始，所以我们用$索引一作为序号，其他的还有（类似item.linkUrl)数据绑定。

我们在单价和金额一栏使用{{ xxx|number:2}}，这是Angular中的一种过滤器，它的作用是保留前一个值xxx有两位小数，所以我们对金额一定要更精确。刚才说这是一种过滤器，那么还有其他的过滤器，比如货币。您可以在xxx前添加一个$符号来表示美元，也可以自己使用其他过滤器。

3.添加事件

当前界面有数量，-按钮和删除按钮。这些事件相对简单。使用ng-click将单击事件添加到元素中。传递商品的id，找到商品，对商品进行加减删除，只是在“-”按钮上增加了一个ng-disabled标签。根据名称，我们很容易想到html的disabled属性，其功能是在ng-disabled的值为true时禁用DOM元素。同样，下面使用的ng-show也是一样的，true时显示，false时隐藏。如果是数字，会自动转换为布尔值，0为假，非0为真，注意负数也是真！在这里，数量为1的时候不能减少，因为少了可以直接删除~

然后在输入元素中加入ng-keydown事件，这样就只能输入方向键、数字键和退格键。然后我试了一下，但是我可以输入一个像“00021”这样的数字，这显然是不令人满意的。我看了一下淘宝的购物车，发现前面输入0时，这个文本框的内容会自动刷新，之前的0会被去掉，于是我添加了ng-keyup事件：

$ scope . quantitykeyup=function(event){ event=event | | window . event；//兼容IE8，目标也是var target=event . target | | event . srcelement；var key code=event . key code；if(48===key code | | 96===key code){ target . value=ParSeint(target . value)；}};此时，当我输入0时，文本框的值将自动刷新。为什么不将其添加到keydown并添加另一个事件？那是因为target.value的值仍然是触发按键事件时的原始值，这次的按键输入还没有包括在内，但是这个值是按键事件后的新值。此时，我们可以通过触发keyup事件来达到目的。我们可以对比一下淘宝购物车的效果，我觉得我的体验比它好，因为只要不在最后输入数字文本框，它总是会失去焦点。

4.统计数字

统计量是一种直接绑定方法，通过遍历数组返回值。

对于总额，我做了一个设计，15000打，打九折。使用ng-show隐藏和显示带有折扣信息的总金额。

三.摘要

js中使用了几个forEach遍历数组。ECMAScript5中的原始方法是数组。foreach(函数(项、索引、数组){})。

棱角分明也封装了，棱角分明。foreach(数组，函数(项，索引，数组){ })；

我在代码中两种方法都用，不知道哪个性能好。

此时，购物车已经完成。利用Angular双向绑定，可以快速实现数量和金额的联动变化。希望本文的内容对大家学习和使用Angular有所帮助。有问题可以留言交流。