我刚刚学了angularJS，所以我练习了写一个类似购物车的函数来选择/取消所有。主要功能如下：

1.选择全部复选框，所有列表数据将被选中。取消同样的理由，用ng-model实现双向绑定；

2.选择列表中的全部复选框，全选也会被选中；(这里我想到的方法是给每个对象添加一个勾选字段，然后勾选触发echoChange()函数，用一个cc变量计算当前勾选的个数为真，然后判断勾选的个数是否等于数组长度。如果相等，则证明全部被选中，因此“全选”按钮也被指定为真；不知道有没有更简单的方法。请给我留言，谢谢！)

3.勾选所有选项后，取消所有选项的勾选状态，为假；

4.计算购物车的小计和总金额，只计算勾选的商品；

有一些问题需要完善：

1.我用了type='number '，数量设置min=10，但是手动输入的值没有限制，所以手动输入会有非法值。

2.删除商品函数我只是用pop()方法去掉了最后一个数组元素。其实每个商品对象都应该删除；

3.所有/取消所有选举应有更严格的方法，这需要改进；

附加渲染：

附加代码：

！DOCTYPE html html lang=' en ' ng-app=' testMo ' head meta charset=' UTF-8 ' title/title link rel='样式表href=' CSS/bootstrap。CSS ' rel='外部无跟随'样式。div 1 {边距336020px；}/style/head dydiv ng-controller=' Testctrl ' class=' div 1 ' H4 angularjs-购物车实现全选/取消全选/h4按钮类型=' button ' class=' BTN BTN-信息' ng-click=' addProducT()'添加商品/button button type=' button ' class=' BTN BTN-危险' ng-click='删除产品()'删除商品/button brbr table class=' table-table-bound-table-responsible '和任务描述操作TD/TD检查状态运输署/运输署商品名称运输署/运输署单价运输署/运输署数量运输署/运输署小计/TD/ad tr ng-repeat=' p in cart ' t输入类型=' checkbox ' ng-check=' p . checked ' ng-click=' echo change(p . id，p .选中，选择全部)'/TD TD TD { { p .选中} } | | { { p .选中} }/TD { { p . name } }/TD TD单价：{{p.price}}/td td数量：输入类型=' number ' ng-model=' p . count ' min=' 0 ' value=' p . count '/TD小计：{{p.sum}}/td /tr /table br输入类型='复选框' ng-model=' selectAll ' ng-click=' selectAll click(selectAll)' span ng-hide=' selectAll '全选/spanspan ng-show='selectAll '取消全选/span brbr已选择span{{jishuqi}}/span件商品，总金额：span{ { SumTotal } }/span/div脚本src=' http : js/angular。 js '/脚本脚本角度。模块(' TestMO '，['ng']).控制器(' testCtrl '，函数($ scope){//$ scope。P1=新对象()；//$作用域。P1。价格=10；//$作用域。P1。计数=1；//购物车应该是一个数组$ scope.selectAll=false//全选默认为false $scope.cart=[{id:0，name: '商品0 '，价格：10，count:5，sum:10，checked : false }]；$ scope。add ProducT=function(){ var p=new Object()；p . id=$ scope。手推车。长度；p.name='商品价格=数学。地板(数学。random()* 100)；//对数值向下取整p.count=1p。总和=价格*点数；p . checked=false $ scope . cart . push({ id : p . id，name: p.name，price:p.price，count: p.count，sum: p.sum，checked : p . checked })；控制台。日志($ scope)。手推车)；} //删除商品$ scope。删除product=function(){ $ scope。手推车。pop()；//删除数组中的最后的一个元素，并且返回这个元素，会改变数组里的元素} //全选按钮支票的点击事件$ scope。selectall click=function(sa){ for(var I=0；I $ scope。手推车。长度；i ){ $scope.cart[i].选中=sa} } //单个数据的支票事件$scope.echoChange=function(id，ch，se){ $scope.cart[id]).选中=!ch；//当所有都选中时，全选也要被勾选var cc=0；//计算当前数组中检查为真的数目for(var I=0；I $ scope。手推车。长度；i ){//if($scope.cart[i]).checked==true){//cc；//} $scope.cart[i].检查过了吗？cc :cc} $范围。selectall=(cc==$ scope。手推车。长度)；//当为真的数目=数组长度时，证明全部勾选//控制台。日志($ scope)。selectall)；} //监控数据$scope .$watch('购物车'，函数(newValue，oldValue，scope){ $ scope。sum total=0；//总计$ scope。吉舒奇=0；//计数器for(new VaLue中的var I){ var SumN=new VaLue[I].计数*新值[i].价格；//计算出新的结果$scope.cart[i].总和=总和。to fixed(2)；//保留两位小数并且把它赋值给元数据；if (newValue[i]).选中){ $ scope . SumTotal=SumN $ scope.jishuqi//console。日志($ scope)。sum total)；//控制台。日志($ scope)。季淑琪)；} } }，true)；/* $手表简介：在摘要执行时，如果看观察的的价值与上一次执行时不一样时，就会被触发AngularJS。内部的看实现了页面随模型的及时更新$手表方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件$watch(watchFn、watchAction、deep watch)；如果不加第三个参数，那么只会监听手推车数组，只有当手推车引用改变时才会触发，因此当需要监听一些引用对象时需要把第三个参数设置成真的。*/});/脚本/正文/html如果以上代码有问题或者您有更好的建议，欢迎您联系我，谢谢。

以上AngularJS购物车全选/全消功能的实现方法都是边肖分享的内容。希望能给大家一个参考，支持我们。