华山资源网

AngularJS 购物车全选/取消全选功能的实现方法
网络编程 2024/11/18 佚名
3 1

刚学习angularJS，于是练习写了一个类似于购物车的全选/取消全选的功能，主要实现的功能有：

1、勾选全选checkbox，列表数据全部被勾选，取消同理，用ng-model实现双向绑定；

2、选中列表中的所有checkbox，全选也会被勾选；（这里我想到的方法是给每一个对象增加checked字段，然后勾选触发echoChange（）函数，用了一个cc变量计算当前checked为true的个数，然后再判断被勾选个数与数组长度是否相等，相等则证明全部被勾选，于是全选按钮也赋值为true;不知道还有没有更简单的方式？有请留言告诉我，谢谢！）

3、全部勾选后，只要取消一个全选的check状态就为false；

4、实现购物车的小计和总金额计算，仅计算被勾选的商品；

存在待完善的问题：

1、数量我用了type="number"，设置了min=10,但手动输入的值没有做限制，所以如果手动输入会有非法值；

2、删除商品功能我只是简单的用了pop()方法，移除最后一个数组元素，实际应该对每一个商品对象实现删除；

3、全选/取消全选应该还有更严谨的方法，待完善；

附上效果图：

AngularJS 购物车全选/取消全选功能的实现方法

附上代码：

<!DOCTYPE html>
<html lang="en" ng-app="testMo">
<head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" >
 <style>
  .div1{
   margin: 20px;
  }
 </style>
</head>
<body>
<div ng-controller="testCtrl" class="div1">
 <h4>angularJS--购物车实现全选/取消全选</h4>
 <button type="button" class="btn btn-info" ng-click="addProduct()">添加商品</button>
 <button type="button" class="btn btn-danger" ng-click="deleteProduct()">删除商品</button>
 <br><br>
 <table class="table table-bordered table-responsive" >
  <thead>
  <td>操作</td>
  <td>check状态</td>
  <td>商品名称</td>
  <td>单价</td>
  <td>数量</td>
  <td>小计</td>
  </thead>
  <tr ng-repeat="p in cart" >
   <td><input type="checkbox" ng-checked="p.checked" ng-click="echoChange(p.id,p.checked,selectAll)"></td>
   <td>{{p.checked}}||{{p.checked}}</td>
   <td>{{p.name}}</td>
   <td>单价：￥{{p.price}}</td>
   <td>数量：<input type="number" ng-model="p.count" min="0" value="p.count"></td>
   <td>小计：￥{{p.sum}}</td>
  </tr>
 </table>
 <br>
 <input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"><span ng-hide="selectAll" >全选</span><span ng-show="selectAll">取消全选</span>
 <br><br>
 已选择<span>{{jishuqi}}</span>件商品，总金额：<span>￥{{ sumTotal }}</span>
 
</div>
<script src="/UploadFiles/2021-04-02/angular.js">


如果以上代码有问题或者您有更好的建议，欢迎您联系我，谢谢。


以上这篇AngularJS 购物车全选/取消全选功能的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com