Web-Frontend
js-Tutorial
AngularJS-Implementierung der Warenkorbauswahl und der umgekehrten Auswahlfunktion zum Teilen von Beispielen
AngularJS-Implementierung der Warenkorbauswahl und der umgekehrten Auswahlfunktion zum Teilen von Beispielen
In diesem Artikel wird hauptsächlich AngularJS vorgestellt, um die Funktion zum Auswählen aller und zum Umkehren der Auswahl im Warenkorb zu implementieren. Ich hoffe, es kann allen helfen.
Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen
<!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>
.p1{
margin: 20px;
}
</style>
</head>
<body>
<p ng-controller="testCtrl" class="p1">
<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>
</p>
<script src="../js/angular.js"></script>
<script>
angular.module('testMo',['ng']).controller('testCtrl',function($scope){
// $scope.p1=new Object();
// $scope.p1.price=10;
// $scope.p1.count=1;
//购物车应该是一个数组
$scope.selectAll=false;//全选默认为false
$scope.cart=[{id:0,name:'商品0',price:10,count:5,sum:10,checked:false}];
$scope.addProduct= function (){
var p=new Object();
p.id=$scope.cart.length;
p.name='商品'+ 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('cart',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>PS: Lassen Sie mich den Code der AngularJS mitteilen Warenkorb, die Details Der Code sieht so aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body ng-app="product" ng-controller="productController">
<center>
<h2>商品列表</h2>
<p class="container">
<!--导航栏-->
<nav>
<p >
<p id="bs-example-navbar-collapse-1">
<p>
<input type="text" ng-model="search" placeholder="产品名称">
产品价格:
<select>
<option>0-1000</option>
<option>1000-2000</option>
<option>2000-5000</option>
</select>
<input type="button" style="background:#FF0000" value="全部删除" ng-click="removeAll()">
</p>
</p>
</p>
</nav><br />
<table border="1 solid" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th ng-click="sortProduct('id')">
产品编号
<span></span>
</th>
<th ng-click="sortProduct('name')">
产品名称
<span></span>
</th>
<th ng-click="sortProduct( 'price')">
产品价格
<span></span>
</th>
<th>
操作
<span></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in productList | filter:{ 'name':search} | orderBy:(orderSign+orderColumn) ">
<td>
{{item.id}}
</td>
<td>
{{item.name}}
</td>
<td>
{{item.price | currency:'(RMB)'}}
</td>
<td>
<input type="button" style="background:#FF0000" value="删除" ng-click="delProduct(item.name)">
</td>
</tr>
</tbody>
</table>
</p>
<script>
angular.module('product',[])
.factory('productList',function(){
return [
{ id:910,name:"imac",price:15400 },
{ id:80,name:"iphone",price:5400 },
{ id:29,name:"ipad",price:14200 },
{ id:500,name:"ipad air",price:23400 },
{ id:1200,name:"ipad mini",price:22000},
{ id:100,name:"android",price:9990 }
]
})
.controller('productController',function($scope,productList){
/*$scope.search = "ipad";//定义一个变量
alert($scope.search);*/
$scope.productList=productList
$scope.orderColumn='name'; //排序字段
$scope.orderSign='-'; //为空时正序 为负号时倒序
$scope.sortProduct=function(sortColumn){ //点击列标题排序事件
$scope.orderColumn=sortColumn;//觉得按照那一列进行排序
if($scope.orderSign=="-"){
$scope.orderSign="";
}else{
$scope.orderSign='-';
}
};
//删除产品
$scope.delProduct = function(name){
//alert(name);
if(name!=""){
if(confirm("是否删除"+name+"商品") ){
var p;
for (index in $scope.productList) {
p = $scope.productList[index];
if(p.name == name){
$scope.productList.splice(index,1);
}
}
}
}
}
//清空购物车
$scope.removeAll = function(){
if(confirm("你确定要清空购物车所有商品吗?")){
$scope.productList = [];
}
}
});
</script>
</center>
</body>
</html>Okay, das ist das Ende des Codes.
Verwandte Empfehlungen:
JS-Kontrollkästchen „Alle auswählen und Methode umkehren“
Das obige ist der detaillierte Inhalt vonAngularJS-Implementierung der Warenkorbauswahl und der umgekehrten Auswahlfunktion zum Teilen von Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
Dec 17, 2023 pm 02:54 PM
So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems
Dec 17, 2023 pm 12:09 PM
Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Dec 17, 2023 am 09:39 AM
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.
Praktisches Tutorial: Ausführliche Erklärung der Warenkorbfunktion mit PHP und MySQL
Mar 15, 2024 pm 12:27 PM
Praktisches Tutorial: Ausführliche Erklärung der Warenkorbfunktion mit PHP und MySQL. Die Warenkorbfunktion ist eine der häufigsten Funktionen bei der Website-Entwicklung. Über den Warenkorb können Benutzer die Artikel, die sie kaufen möchten, einfach in den Warenkorb legen Fahren Sie dann mit der Abrechnung und Zahlung fort. In diesem Artikel erklären wir detailliert, wie Sie eine einfache Warenkorbfunktion mit PHP und MySQL implementieren, und stellen spezifische Codebeispiele bereit. Um eine Datenbank und eine Datentabelle zu erstellen, müssen Sie zunächst eine Datentabelle in der MySQL-Datenbank erstellen, um Produktinformationen zu speichern. Das Folgende ist eine einfache Datentabelle
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems
Dec 17, 2023 pm 05:13 PM
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
So verwenden Sie insertBefore in Javascript
Nov 24, 2023 am 11:56 AM
Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).
