Implement simple shopping cart functionality using Angular.js
Let me share with you the implementation code first. There is a rendering below the code. You can combine the two for reference. Without further ado, the specific code is as follows:
<!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>

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

This article will take you to continue learning angular and briefly understand the standalone component (Standalone Component) in Angular. I hope it will be helpful to you!

This article will give you an in-depth understanding of Angular's state manager NgRx and introduce how to use NgRx. I hope it will be helpful to you!

The Angular project is too large, how to split it reasonably? The following article will introduce to you how to reasonably split Angular projects. I hope it will be helpful to you!

How to customize the angular-datetime-picker format? The following article talks about how to customize the format. I hope it will be helpful to everyone!

This article will take you through the independent components in Angular, how to create an independent component in Angular, and how to import existing modules into the independent component. I hope it will be helpful to you!

This article will take you through dependency injection, introduce the problems that dependency injection solves and its native writing method, and talk about Angular's dependency injection framework. I hope it will be helpful to you!

This article will give you an in-depth understanding of several special selectors in Angular: host, :host-context, ::ng-deep. I hope it will be helpful to you!

Years of learning experience tell me that the fastest way to understand a concept is to see its practice, so I compiled 8 open source projects that you can refer to when learning Angular to learn how to use the Angular framework~
