Home >Web Front-end >JS Tutorial >AngularJS makes the shopping cart select all inverse function

AngularJS makes the shopping cart select all inverse function

php中世界最好的语言Original: 2018-04-19 10:30:201125browse

This time I will bring you AngularJS How to create a shopping cart select-all and reverse-select function. What are the precautions for AngularJS to create a shopping cart select-all and reverse-select function, as follows. This is a practical case, let’s take a look at it.

I just learned angularJS, so I practiced writing a function similar to the select all/unselect all of the shopping cart. The main functions implemented are:

1. Check the Select All checkbox and all the list data will be checked. Same as canceling, use ng-model to achieve two-way binding;

2. Select all checkboxes in the list, and all of them will be checked; (The method I think of here is to add a checked field to each object, and then check it to trigger the echoChange() function, and use a cc variable to calculate the current checked value as The number of true, and then determine whether the number of checked items is equal to the length of the array. If equal, it proves that all are checked, so the select all button is also assigned a value of true; Is there a simpler way? Please leave a message? Me, thank you! )

3. After all are checked, as long as you cancel an all-selected check status, the check status will be false;

4. Realize the calculation of the subtotal and total amount of the shopping cart, and only calculate the checked products;

There are problems that need to be improved:

1. I used type="number" for the quantity and set min=10, but there is no limit on the value entered manually, so there will be illegal values if entered manually;

2. To delete the product function, I simply used the pop() method to remove the last array element. In fact, each product object should be deleted;

3. There should be a more rigorous method for selecting/unselecting all, which needs to be improved;

Attached code:

<!DOCTYPE html>
<htmllang="en"ng-app="testMo">
<head>
 <metacharset="UTF-8">
 <title></title>
 <linkrel="stylesheet"href="css/bootstrap.css"rel="external nofollow">
 <style>
  .p1{
   margin: 20px;
  }
 </style>
</head>
<body>
<png-controller="testCtrl"class="p1">
 <h4>angularJS--购物车实现全选/取消全选</h4>
 <buttontype="button"class="btn btn-info"ng-click="addProduct()">添加商品</button>
 <buttontype="button"class="btn btn-danger"ng-click="deleteProduct()">删除商品</button>
 <br><br>
 <tableclass="table table-bordered table-responsive">
  <thead>
  <td>操作</td>
  <td>check状态</td>
  <td>商品名称</td>
  <td>单价</td>
  <td>数量</td>
  <td>小计</td>
  </thead>
  <trng-repeat="p in cart">
   <td><inputtype="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>数量：<inputtype="number"ng-model="p.count"min="0"value="p.count"></td>
   <td>小计：￥{{p.sum}}</td>
  </tr>
 </table>
 <br>
 <inputtype="checkbox"ng-model="selectAll"ng-click="selectAllClick(selectAll)"><spanng-hide="selectAll">全选</span><spanng-show="selectAll">取消全选</span>
 <br><br>
 已选择<span>{{jishuqi}}</span>件商品，总金额：<span>￥{{ sumTotal }}</span>
  
</p>
<scriptsrc="js/angular.js"></script>
<script>
 angular.module(&#39;testMo&#39;,[&#39;ng&#39;]).controller(&#39;testCtrl&#39;,function($scope){
//  $scope.p1=new Object();
//  $scope.p1.price=10;
//  $scope.p1.count=1;
  //购物车应该是一个数组
  $scope.selectAll=false;//全选默认为false
  $scope.cart=[{id:0,name:&#39;商品0&#39;,price:10,count:5,sum:10,checked:false}];
  $scope.addProduct= function (){
   var p=new Object();
   p.id=$scope.cart.length;
   p.name=&#39;商品&#39;+ p.id
   p.price=Math.floor(Math.random()*100);//对数值向下取整
   p.count=1;
   p.sum= p.price* p.count;
   p.checked=false;
   $scope.cart.push({id: p.id,name: p.name,price:p.price,count: p.count,sum: p.sum,checked: p.checked});
   console.log($scope.cart);
  }
  //删除商品
  $scope.deleteProduct= function (){
   $scope.cart.pop();//删除数组中的最后的一个元素，并且返回这个元素，会改变数组里的元素
  }
  
  //全选按钮check的点击事件
  $scope.selectAllClick= function (sa) {
    for(var i=0;i<$scope.cart.length;i++){
    $scope.cart[i].checked=sa;
   }
  }
  //单个数据的check事件
  $scope.echoChange=function(id,ch,se){
   $scope.cart[id].checked=!ch;
   //当所有都选中时，全选也要被勾选
   var cc=0;//计算当前数组中checked为真的数目
   for(var i=0;i<$scope.cart.length;i++){
//    if($scope.cart[i].checked==true){
//     cc++;
//    }
    $scope.cart[i].checked?cc++:cc;
   }
   $scope.selectAll=(cc==$scope.cart.length);//当为真的数目=数组长度时，证明全部勾选
//   console.log($scope.selectAll);
  }
  //监控数据
   $scope.$watch(&#39;cart&#39;,function(newValue,oldValue,scope){
    $scope.sumTotal=0; //总计
    $scope.jishuqi=0; //计数器
    for(var i in newValue) {
     var sumN = newValue[i].count * newValue[i].price; //计算出新的结果
     $scope.cart[i].sum = sumN.toFixed(2); //保留两位小数并且把它赋值给元数据;
     if (newValue[i].checked) {
      $scope.sumTotal += sumN;
      $scope.jishuqi++;
//      console.log($scope.sumTotal);
//      console.log($scope.jishuqi);
     }
    }
   },true);
  /*$watch简介:在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。
      AngularJS内部的watch实现了页面随model的及时更新。
      $watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。
   $watch(watchFn,watchAction,deepWatch);
   如果不加第三个参数，那么只会监听cart数组，只有当cart引用改变时才会触发,因此当需要监听一些引用对象时需要把第三个参数设置成true。
      */
 });
</script>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

AngularJS makes the shopping cart select all inverse function

Related articles