Heim > Artikel > Web-Frontend > AngularJS lässt den Warenkorb alle Umkehrfunktionen auswählen

AngularJS lässt den Warenkorb alle Umkehrfunktionen auswählen

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

Dieses Mal bringe ich Ihnen AngularJS mit, um die Funktion „Alle auswählen und Auswahl umkehren“ im Warenkorb zu erstellen Funktion in AngularJS wie folgt. Dies ist ein praktischer Fall, schauen wir uns ihn an. Ich habe gerade AngularJS gelernt, also habe ich geübt, eine Funktion zu schreiben, die der Funktion „Alle auswählen/Alle abwählen“ in einem Warenkorb ähnelt. Die wichtigsten implementierten Funktionen sind:

1. Aktivieren Sie das Kontrollkästchen „Alle auswählen“ und alle Listendaten werden überprüft. Verwenden Sie ng-model, um eine bidirektionale Bindung zu erreichen 2. Wählen Sie alle Kontrollkästchen in der Liste aus, und alle werden aktiviert. (Die Methode, die ich mir hier vorstelle, besteht darin, jedem Objekt ein aktiviertes Feld hinzuzufügen und es dann zu aktivieren, um die echoChange()-Funktion auszulösen und einen CC zu verwenden Variable, um den aktuellen geprüften Wert als die Anzahl der wahren Werte zu berechnen und dann zu bestimmen, ob die Anzahl der geprüften Elemente gleich der Länge des Arrays ist. Wenn sie gleich sind, beweist dies, dass alle geprüft sind, sodass der Schaltfläche „Alle auswählen“ auch ein zugewiesen wird Wert von true; Gibt es einen einfacheren Weg? Bitte hinterlassen Sie eine Nachricht! 3. Nachdem alle überprüft wurden, lautet der Prüfstatus „falsch“, solange Sie einen „Alles ausgewählten“-Prüfstatus abbrechen 4. Berechnen Sie die Zwischensumme und den Gesamtbetrag des Warenkorbs und berechnen Sie nur die überprüften Produkte

Es gibt Probleme, die verbessert werden müssen:

1. Ich habe type="number" für die Menge verwendet und min=10 eingestellt, aber es gibt keine Begrenzung für den manuell eingegebenen Wert, sodass es bei manueller Eingabe zu illegalen Werten kommt

2. Um die Produktfunktion zu löschen, habe ich einfach die Methode pop() verwendet, um das letzte Array-Element zu entfernen. Tatsächlich sollte jedes Produktobjekt gelöscht werden 3. Es sollte eine strengere Methode zum Auswählen/Abwählen aller Elemente geben, die verbessert werden muss

Angehängter Code:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

JS-Implementierung der Datenvalidierung und Übermittlung von Kontrollkästchenformularen

vue.js bidirektionale Bindungsverwendung Ausführliche Erklärung

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

So konvertieren Sie Zahlen und Zeichenfolgen in JS

Das obige ist der detaillierte Inhalt vonAngularJS lässt den Warenkorb alle Umkehrfunktionen auswählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erklärung der Schritte der digitalen Schiebeuhr von jsNächster Artikel：Detaillierte Erklärung der Schritte der digitalen Schiebeuhr von js

In Verbindung stehende Artikel

Mehr sehen