<强> 1,勾选全选复选框,列表数据全部被勾选,取消同理,用ng-model实现双向绑定;
<强> 2,选中列表中的所有复选框,全选也会被勾选;强(这里我想到的方法是给每一个对象增加了字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前检查为真正的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还有没有更简单的方式?有请留言告诉我,谢谢!)
<强> 3,全部勾选后,只要取消一个全选的检查状态就为假,
<强> 4,实现购物车的小计和总金额计算,仅计算被勾选的商品;
1,数量我用了类型=笆俊?设置了min=10,但手动输入的值没有做限制,所以如果手动输入会有非法值;
2,删除商品功能我只是简单的用了pop()方法,移除最后一个数组元素,实际应该对每一个商品对象实现删除;
3,全?取消全选应该还有更严谨的方法,待完善;
附上代码:
& lt; !DOCTYPE html>
& lt; html lang=癳n”ng-app=皌estMo”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/bootstrap.css " rel=巴獠縩ofollow”比;
& lt; style>
.div1 {
保证金:20 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div ng-controller=皌estCtrl”class=癲iv1”比;
& lt; h5> angularJS——购物车实现全?取消全选& lt;/h5>
& lt;按钮类型=鞍磁ァ崩?癰tn btn-info ng-click”=癮ddProduct()在添加商品& lt;/button>
& lt;按钮类型=鞍磁ァ崩?癰tn btn-danger ng-click”=癲eleteProduct()在删除商品& lt;/button>
& lt; br> & lt; br>
& lt;表类="表table-bordered table-responsive”比;
& lt; thead>
& lt; td>操作& lt;/td>
& lt; td>检查状态& lt;/td>
& lt; td>商品名称& lt;/td>
& lt; td>单价& lt;/td>
& lt; td>数量& lt;/td>
& lt; td>小计& lt;/td>
& lt;/thead>
& lt; tr ng-repeat=肮何锍怠眕比;
& lt; td> & lt;输入类型=案囱】颉眓g-checked=" p。检查“ng-click=" echoChange (p.id, p.checked selectAll)“祝辞& lt;/td>
& lt; td> {{p.checked}} | | {{p.checked}} & lt;/td>
& lt; td> {{p.name}} & lt;/td>
& lt; td>单价:￥{{p.price}} & lt;/td>
& lt; td>数量:& lt;输入类型=笆俊眓g-model=皃。数" min=" 0 " value=" https://www.yisu.com/zixun/p.count "祝辞& lt;/td>
& lt; td>小计:￥{{p.sum}} & lt;/td>
& lt;/tr>
& lt;/table>
& lt; br>
& lt;输入类型=案囱】颉眓g-model=皊electAll ng-click”=皊electAllClick (selectAll)”祝辞& lt;跨度ng-hide=皊electAll”在全选& lt;/span> & lt;跨度ng-show=皊electAll祝辞取消全选& lt;/span>
& lt; br> & lt; br>
已选择& lt; span> {{jishuqi}} & lt;/span>件商品,总金额:& lt; span>￥{{将sumtotals}} & lt;/span>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/js/angular.js "祝辞& lt;/script>
& lt; script>
angular.module (“testMo”[“ng”])范式(testCtrl,函数(范围){//美元范围。p1=新对象();//scope.p1.price=10美元;//$ scope.p1.count=1;//购物车应该是一个数组
scope.selectAll=false;美元//全选默认为假
$ scope.cart=[{id: 0,名字:“商品0 ',价格:10数:5,总和:10,检查:假});
美元的范围。addProduct=function () {
var p=新对象();
p.id=$ scope.cart.length;
+ p.id p.name='商品”
p.price=Math.floor (math . random() * 100);//对数值向下取整
p.count=1;
p。和=p。价格* p.count;
p.checked=false;
scope.cart美元。推动({id: p。id、名称:p.name,价格:p.price数:p。数量,金额:p。和,检查:p.checked});
console.log ($ scope.cart);
}//删除商品
$ scope.deleteProduct=function () {
美元scope.cart.pop();//删除数组中的最后的一个元素,并且返回这个元素,会改变数组里的元素
}//全选按钮检查的点击事件
美元的范围。selectAllClick=函数(sa) {
(var i=0; i< scope.cart.length美元;我+ +){
$ scope.cart[我]支票=sa);
}
}//单个数据的检查事件
$ scope.echoChange=函数(id、ch se) {
$ scope.cart [id]支票=! ch;//当所有都选中时,全选也要被勾选
var cc=0;//计算当前数组中检查为真的数目
(var i=0; i< scope.cart.length美元;我+ +){//如果($ scope.cart[我]支票==true) {//cc + +;//}
$ scope.cart[我].checked& # 63; cc + +: cc;
}
美元scope.selectAll=(cc==scope.cart.length美元);//当为真的数目=数组长度时,证明全部勾?/console.log ($ scope.selectAll);
}//监控数据
范围。看美元(“购物车”,函数(newValue、oldValue、范围){
美元scope.sumTotal=0;//总计
美元scope.jishuqi=0;//计数器
我在newValue (var) {
var sumN=newValue[我]。数* newValue[我].price;//计算出新的结果
美元scope.cart[我]。和=sumN.toFixed (2);//保留两位小数并且把它赋值给元数据;
如果(newValue[我]支票){
美元的范围。将sumtotals +=sumN;
美元scope.jishuqi + +;//console.log ($ scope.sumTotal);//console.log ($ scope.jishuqi);
}
}
},真正的);/*美元看简介:在消化执行时,如果看观察的的价值与上一次执行时不一样时,就会被触发。
AngularJS内部的观察实现了页面随模型的及时更新。
看美元方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件。
美元的手表(watchFn watchAction deepWatch);
如果不加第三个参数,那么只会监听车数组,只有当车引用改变时才会触发,因此当需要监听一些引用对象时需要把第三个参数设置成正确的。
*/}）;
& lt;/script>
& lt;/body>
& lt;/html>
