Maison > Article > interface Web > AngularJS permet au panier de sélectionner toutes les fonctions inverses

AngularJS permet au panier de sélectionner toutes les fonctions inverses

php中世界最好的语言original: 2018-04-19 10:30:201057parcourir

Cette fois, je vous propose AngularJS pour créer la fonction de sélection de tout et d'inversion du panier. Quelles sont les précautions pour que le panier d'achat sélectionne tout et inverse la sélection. fonction dans AngularJS, comme suit. C'est un cas pratique, jetons-y un coup d'œil.

Je viens d'apprendre AngularJS, je me suis donc entraîné à écrire une fonction similaire à tout sélectionner/désélectionner dans un panier. Les principales fonctions implémentées sont :

1. Cochez la case Sélectionner tout et toutes les données de la liste seront vérifiées. De la même manière que pour l'annuler, utilisez ng-model pour obtenir une liaison bidirectionnelle

. 2. Cochez toutes les cases de la liste, et toutes seront cochées ; (la méthode à laquelle je pense ici consiste à ajouter un champ coché à chaque objet, puis à le cocher pour déclencher la fonction echoChange() et à utiliser un cc. variable pour calculer la valeur actuellement vérifiée comme le nombre de vrais, puis déterminer si le nombre d'éléments vérifiés est égal à la longueur du tableau. S'il est égal, cela prouve que tous sont vérifiés, donc le bouton Sélectionner tout se voit également attribuer un. valeur de vrai ; Existe-t-il un moyen plus simple ? Veuillez laisser un message ? Moi, merci )

3. Une fois que tout a été vérifié, tant que vous annulez un statut de contrôle entièrement sélectionné, le statut de contrôle sera faux

; 4. Réaliser le calcul du sous-total et du montant total du panier, et calculer uniquement les produits cochés

; Il y a des problèmes qui doivent être améliorés :

1. J'ai utilisé type="number" pour la quantité et défini min=10, mais il n'y a pas de limite sur la valeur saisie manuellement, il y aura donc des valeurs illégales si elles sont saisies manuellement

; 2. Pour supprimer la fonction product, j'ai simplement utilisé la méthode pop() pour supprimer le dernier élément du tableau. En fait, chaque objet product doit être supprimé

; 3. Il devrait y avoir une méthode plus rigoureuse pour tout sélectionner/désélectionner, qui doit être améliorée

;

Code ci-joint :

<!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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation JS de la validation des données et de la soumission du formulaire de case à cocher

Utilisation de la liaison bidirectionnelle vue.js Explication détaillée

Comment convertir des nombres et des chaînes en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php vue.js checkbox 字符串 JS number 对象

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des étapes de l'horloge numérique coulissante jsArticle suivant：Explication détaillée des étapes de l'horloge numérique coulissante js

Articles Liés

Voir plus