Implementieren Sie einfache Warenkorbfunktionen mit Angular.js
Lassen Sie mich zunächst den Implementierungscode mitteilen. Sie können die beiden als Referenz ohne weiteres kombinieren:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.angularjs.org/1.2.5/angular.min.js"></script>
<style type="text/css">
td,th{
width: 150px;
text-align: left;
}
table{
width: 800px;
}
.num{
width: 70px;
text-align: center;
}
tr td:last-child button {
background-color: red;
}
#foot button{
background-color: red;
}
</style>
</head>
<!--ng-bind是从$scope -> view的单向绑定ng-modle是$scope <-> view的双向绑定
{{}} 与 ng-bind 的区别是后者在加载时用户不会看到渲染之前的东西,前者可能会看到,所以首页一般用后者加载数据
-->
<body ng-app="myApp">
<div ng-controller="VC1">
<table border="" cellspacing="" cellpadding="">
<tr><th>产品编号</th><th>产品名称</th><th>购买数量</th><th>产品单价</th><th>产品总价</th><th>操作</th></tr>
<tr ng-repeat="x in Product" >
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="reduce($index)">-</button>
<input type="text" class="num" ng-model="x.quantity" ng-change="change($index)" />
<button ng-click="add($index)">+</button> </td>
<td >{{x.price}}</td>
<td>{{x.price * x.quantity}}</td>
<td><button ng-click="remove($index)">移除</button></td></tr>
</table>
<div id="foot"><span>总价:</span><span ng-bind="totalQuantity()"></span><span>购买数量</span>
<span >{{numAll()}}</span> <button ng-click="removeAll()">清空购物车</button> </div>
</div>
</body>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("VC1",function($scope){
$scope.Product = [{
id: 1000,
name: "iPhone8",
quantity: 1,
price: 8888
}, {
id: 1001,
name: "iPhone9",
quantity: 1,
price: 9888
}, {
id: 1002,
name: "iPhone 2s",
quantity: 1,
price: 3888
}, {
id: 1003,
name: "iPhone 7P+",
quantity: 1,
price: 10088
}];
//减少数量
$scope.reduce = function(index){
if( $scope.Product[index].quantity > 1){
$scope.Product[index].quantity--;
}else{
$scope.remove(index);
}
}
//添加数量函数
$scope.add = function(index){
$scope.Product[index].quantity++;
}
//所有商品总价函数
$scope.totalQuantity = function(){
var allprice = 0
for(var i = 0 ; i <$scope.Product.length;i++ ){
allprice += $scope.Product[i].quantity * $scope.Product[i].price;
}
return allprice;
}
//购买总数量函数
$scope.numAll = function(){
var numAlls = 0
for(var i = 0 ; i <$scope.Product.length;i++ ){
numAlls += $scope.Product[i].quantity;
}
return numAlls;
}
//删除当前商品
$scope.remove = function(index){
if(confirm("确定要清空数据吗")){
$scope.Product.splice(index,1)
}
}
//清空购物车
$scope.removeAll = function(){
if(confirm("你确定套清空购物车所有商品吗?")){
$scope.Product = [];
}
}
//解决输入框输入负数时变为1
$scope.change = function(index){
if ( $scope.Product[index].quantity >= 1) {
}else{
$scope.Product[index].quantity = 1;
}
}
$scope.$watch('Product',function(oldvalue,newvalue){
console.log(oldvalue);
console.log(newvalue);
})
})
</script>
</html>
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
Angular Learning spricht über eigenständige Komponenten (Standalone Component)
Dec 19, 2022 pm 07:24 PM
Dieser Artikel wird Sie dabei unterstützen, Angular weiter zu lernen und die eigenständige Komponente (Standalone Component) in Angular kurz zu verstehen. Ich hoffe, er wird Ihnen hilfreich sein!
Detaillierte Erläuterung des Angular Learning State Managers NgRx
May 25, 2022 am 11:01 AM
Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis des Angular-Statusmanagers NgRx und stellt Ihnen die Verwendung von NgRx vor. Ich hoffe, er wird Ihnen hilfreich sein!
Was soll ich tun, wenn das Projekt zu groß ist? Wie teilt man Angular-Projekte sinnvoll auf?
Jul 26, 2022 pm 07:18 PM
Das Angular-Projekt ist zu groß. Wie kann man es sinnvoll aufteilen? Der folgende Artikel zeigt Ihnen, wie Sie Angular-Projekte sinnvoll aufteilen. Ich hoffe, er ist hilfreich für Sie!
Lassen Sie uns darüber sprechen, wie Sie das Angular-DateTime-Picker-Format anpassen
Sep 08, 2022 pm 08:29 PM
Wie kann ich das Angular-DateTime-Picker-Format anpassen? Im folgenden Artikel geht es um die Anpassung des Formats. Ich hoffe, er ist für alle hilfreich!
Eine kurze Analyse unabhängiger Komponenten in Angular und deren Verwendung
Jun 23, 2022 pm 03:49 PM
Dieser Artikel führt Sie durch die unabhängigen Komponenten in Angular, wie Sie eine unabhängige Komponente in Angular erstellen und wie Sie vorhandene Module in die unabhängige Komponente importieren. Ich hoffe, er wird Ihnen hilfreich sein!
Eine Schritt-für-Schritt-Anleitung zum Verständnis der Abhängigkeitsinjektion in Angular
Dec 02, 2022 pm 09:14 PM
Dieser Artikel führt Sie durch die Abhängigkeitsinjektion, stellt die durch die Abhängigkeitsinjektion gelösten Probleme und ihre native Schreibmethode vor und spricht über das Abhängigkeitsinjektions-Framework von Angular. Ich hoffe, es wird Ihnen hilfreich sein!
Angulars :host-, :host-context- und ::ng-deep-Selektoren
May 31, 2022 am 11:08 AM
Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis mehrerer spezieller Selektoren in Angular: host, :host-context, ::ng-deep. Ich hoffe, er wird Ihnen hilfreich sein!
So starten Sie mit Angular: Beginnen Sie mit 8 Open-Source-Projekten!
Jul 29, 2022 pm 08:36 PM
Jahrelange Lernerfahrung zeigt mir, dass der schnellste Weg, ein Konzept zu verstehen, darin besteht, seine Praxis zu sehen. Deshalb habe ich 8 Open-Source-Projekte zusammengestellt, auf die Sie beim Erlernen von Angular zurückgreifen können, um zu lernen, wie man das Angular-Framework verwendet
