使用Angular.js实现简单的购物车功能
先给大家分享实现代码，在代码下面有效果图展示，大家可以两者结合参考下，废话不多说了，具体代码如下所示：
<!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>
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Pembelajaran sudut bercakap tentang komponen kendiri (Komponen Kendiri)
Dec 19, 2022 pm 07:24 PM
Artikel ini akan membawa anda untuk terus belajar sudut dan memahami secara ringkas komponen kendiri (Komponen Kendiri) dalam Angular Saya harap ia akan membantu anda!
Penjelasan terperinci tentang pengurus keadaan pembelajaran sudut NgRx
May 25, 2022 am 11:01 AM
Artikel ini akan memberi anda pemahaman yang mendalam tentang pengurus negeri Angular NgRx dan memperkenalkan cara menggunakan NgRx saya harap ia akan membantu anda!
Apakah yang perlu saya lakukan jika projek itu terlalu besar? Bagaimana untuk membahagikan projek Angular dengan munasabah?
Jul 26, 2022 pm 07:18 PM
Projek Angular terlalu besar, bagaimana untuk membahagikannya secara munasabah? Artikel berikut akan memperkenalkan kepada anda cara membahagikan projek Angular secara munasabah. Saya harap ia akan membantu anda!
Analisis ringkas komponen bebas dalam Angular dan lihat cara menggunakannya
Jun 23, 2022 pm 03:49 PM
Artikel ini akan membawa anda melalui komponen bebas dalam Angular, cara mencipta komponen bebas dalam Angular, dan cara mengimport modul sedia ada ke dalam komponen bebas saya harap ia akan membantu anda!
Mari kita bincangkan tentang cara menyesuaikan format pemilih masa-masa-sudut
Sep 08, 2022 pm 08:29 PM
Bagaimana untuk menyesuaikan format angular-datetime-picker? Artikel berikut membincangkan cara menyesuaikan format saya harap ia akan membantu semua orang!
Panduan langkah demi langkah untuk memahami suntikan pergantungan dalam Angular
Dec 02, 2022 pm 09:14 PM
Artikel ini akan membawa anda melalui suntikan pergantungan, memperkenalkan masalah yang diselesaikan oleh suntikan pergantungan dan kaedah penulisan asalnya, dan bercakap tentang rangka kerja suntikan pergantungan Angular saya harap ia akan membantu semua orang.
Angular's :host, :host-context, ::ng-deep selectors
May 31, 2022 am 11:08 AM
Artikel ini akan memberi anda pemahaman yang mendalam tentang beberapa pemilih khas dalam Angular: host, :host-context, ::ng-deep Saya harap ia akan membantu anda!
Pemahaman mendalam tentang NgModule (modul) dalam Sudut
Sep 05, 2022 pm 07:07 PM
Modul NgModule ialah titik penting dalam Angular, kerana blok binaan asas Angular ialah NgModule. Artikel ini akan membawa anda melalui modul NgModule dalam Angular saya harap ia akan membantu anda!
