Angular and BootStrap3 implement the shopping cart function, angularbootstrap3

Angular and BootStrap3 implement the shopping cart function, angularbootstrap3

1. page creation

1. html Structure

Use BootStrap3 to quickly create a shopping cart form style.
Main functions:
A: The data in the list is shown in.
B: add and delete ports.
C: Clear the shopping cart
D: increase or decrease the number of products
E: Dynamic Calculation of commodity prices and total prices

<! DOCTYPE html> 
2. js Logic
1. register an app
2 define controller as data
3. Bind applications and controllers to html for Data Rendering

 var app=angular.module("app",[]); var carController=function($scope){  $scope.data=[   {    id:1,    name:'HuaWei',    quantity:'2',    price:4300   },   {    id:2,    name:'iphone7',    quantity:'3',    price:6300   },   {    id:3,    name:'XiaoMi',    quantity:'3',    price:2800   },   {    id:4,    name:'Oppo',    quantity:'3',    price:2100   },   {    id:5,    name:'Vivo',    quantity:'3',    price:2100   }  ] }
Note:

1. register an application through ng-app in html and bind ng-controller to the controller scope. ng-repeat traverses the Product data
2. In js, angular provides the angular. forEach (obj, fn (item) {}) method to traverse angular Data and further process the data in fn. This method is used to calculate the total price.

Ii. Business Logic
1. Total price calculation
/** Calculate the total price * @ method: angular. forEach () * @ param: 1. $ scope. obj: data on the scope to be traversed * 2. function (item) {} callback, processing traversed data within the function **/$ scope. totalPrice = function () {var total = 0; angular. forEach ($ scope. data, function (item) {total + = item. quantity * item. price;}) return total}/* total Number of computations */$ scope. totalQuantity = function () {var total = 0; angular. forEach ($ scope. data, function (item) {total + = item. quantity;}) return total}
Note:

1) Use the forEach method provided by angular to traverse the current data and calculate the total price and total quantity of all data.
2. Delete entries
/* Remove an item * @ param: input the id of the current item as the parameter to determine which item to remove **/$ scope. removeItem = function (id) {var index = findIndex (); $ scope. data. splice (index, 1 );}
Note:

1) The findIndex () method is extracted to determine the items of the current operation. The Code is as follows:
/* Find the location of the element in the current operation */function findIndex (id) {var index =-1; angular. forEach ($ scope. data, function (value, key, obj) {if (value. id = id) {index = key; return index ;}) return index ;}
3. Clear operation
On the page, the expression is used directly, but data = null completes the data clearing operation.

<Tr> <td> </td> <td> total number of purchases </td> <td >{{ totalQuantity ()}} </td> <td> total purchase price </td> <td >{{ totalPrice ()}} </td> <button class = "btn-danger" ng-click = "data = null"> clear the shopping cart </button> </td> </tr>
4. add and delete items
/* Increase the number of items */$ scope. add = function (id) {var index = findIndex ($ scope, id), item = $ scope. data [index]; item. quantity ++;}/* reduce the number of items * @ description: * reduce the number of items currently. When only one item is left, a dialog box is displayed to confirm whether to clear the item. Yes, call the removeItem method to clear the current item **/$ scope. reduce = function (id) {var index = findIndex ($ scope, id), item = $ scope. data [index]; if (item. quantity> 1) {// determines whether the current item can be subtracted. quantity --;} else {var makesure = confirm ('Are you sure you want to clear the current item ?? '); If (makesure) {$ scope. removeItem (id )}}}
Summary:
This demo mainly utilizes angular's bidirectional data binding feature to greatly simplify operations.
Key points:
1) angular. forEach (obj, fn (value, key, obj) iterator
2) bind the ng-click command to the click event. Using ng-click will automatically trigger angular's dirty checking mechanism to update the view in real time.
3) the ng-repeat command traverses data and renders the page.
4) ng-show command: determines whether to display the element by its value (the principle is to add the nghide class name to the element)

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.