angular.js实现购物车功能

来源：懂视网责编：小OO 时间：2020-11-27 22:27:18

angular.js实现购物车功能

本文实例为大家分享了angular.js购物车功能的具体代码，供大家参考，具体内容如下：<，[])；my.controller("mys"，function ($scope) { /*声明数据对象，初始化商品信息，数据自拟且不低于四条*/ $scope.arr=[ {name："qq"，price：12.9，number：2，state：false}.{name："wx"，price：23.9，number：1，state：false}.{name："aa"，price：99.9，number：1，state：false}.{name："bb"，price：10.9，number：5，1)；} } /*点击”+”按钮输入框中的数量加1，同时可以计算出商品小计，选中商品被删除。

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了angular.js购物车功能的具体代码，供大家参考，具体内容如下：<，[])；my.controller("mys"，function ($scope) { /*声明数据对象，初始化商品信息，数据自拟且不低于四条*/ $scope.arr=[ {name："qq"，price：12.9，number：2，state：false}.{name："wx"，price：23.9，number：1，state：false}.{name："aa"，price：99.9，number：1，state：false}.{name："bb"，price：10.9，number：5，1)；} } /*点击”+”按钮输入框中的数量加1，同时可以计算出商品小计，选中商品被删除。

本文实例为大家分享了angular.js购物车功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>购物车</title>
 <script src="angularjs/angular.js"></script>
 <style>
 .box{
 width: 100%;
 border-bottom: 1px solid silver;
 }
 .box1{
 width: 100%;
 margin-top: 5px;
 }
 .box1 button{
 width: 100px;
 height: 40px;
 background: crimson;
 color: white;
 text-align: center;
 line-height: 40px;
 float: right;
 border: 0;
 border-radius: 13px;
 }
 table{
 width: 100%;
 }
 tr td button{
 background: blue;
 color: white;
 border: 0;
 }

 </style>
 <script>
 var my=angular.module("my",[]);
 my.controller("mys",function ($scope) {
 /*声明数据对象，初始化商品信息，数据自拟且不低于四条*/
 $scope.arr=[
 {name:"qq",price:12.9,number:2,state:false},
 {name:"wx",price:23.9,number:1,state:false},
 {name:"aa",price:99.9,number:1,state:false},
 {name:"bb",price:10.9,number:5,state:false}
 ];
 /*删除条目*/
 $scope.del=function (index) {
 if(confirm("确定移除此项嘛？")){
 $scope.arr.splice(index,1);
 }
 }
 /*点击”+”按钮输入框中的数量加1,同时可以计算出商品小计,和购物 车总价*/
 $scope.jia=function (index) {
 $scope.arr[index].number++;
 }
 /*当点击”-”按钮时输入框中的数量减1,商品小计和总价*/
 $scope.jian=function (index) {
 if($scope.arr[index].number>1){
 $scope.arr[index].number--;
 }
 else if($scope.arr[index].number==1){
 if(confirm("用户是否删除该商品")){
 $scope.arr.splice(index,1);
 }
 }
 }
 /*计算总价格*/
 $scope.allSum=function () {
 var allPrice=0;
 for(var i=0;i<$scope.arr.length;i++){
 allPrice+=$scope.arr[i].price*$scope.arr[i].number;
 }
 return allPrice;
 };
 /*清空购物车*/
 $scope.alldel=function () {
 if($scope.arr.length==0){
 alert("您的购物车已空");
 }else{
 $scope.arr=[];
 }
 }
 /*用户点击第一个checkbox代表全选，全选商品后点击删除选中商品，选中商品被删除， 若购物车商品被全部删除后*/
 $scope.allCheck=false;
 $scope.allx= function () {
 for(var i=0;i<$scope.arr.length;i++){
 if($scope.allCheck==true){
 $scope.arr[i].state=true;
 }else {
 $scope.arr[i].state=false;
 }
 }
 };
 /*每个复选框*/
 $scope.itemCheck = function () {
 var flag = 0;
 for(var i = 0; i<$scope.arr.length; i++){
 if($scope.arr[i].state == true){
 flag ++;
 }
 }
 if(flag == $scope.arr.length){
 $scope.allCheck = true;
 }else{
 $scope.allCheck = false;
 }
 };
 /*批量删除*/
 $scope.pi=function () {
 for(var i=0;i<$scope.arr.length;i++){
 if($scope.arr[i].state==true){
 $scope.arr.splice(i,1);
 i--;
 $scope.allCheck = false;
 }
 }
 }
 });
 </script>
</head>
<body ng-app="my" ng-controller="mys">
 <div class="box">
 <h2>我的购物车</h2>
 </div>
 <div class="box1">
 <button ng-click="alldel()" style="margin-right: 10px">清空购物车</button><button ng-click="pi()" style="margin-left: 5px">批量删除</button>
 </div>
 <div class="box2">
 <table border="1">
 <tr>
 <th><input type="checkbox" ng-model="allCheck" ng-click="allx()"/></th>
 <th>name</th>
 <th>price</th>
 <th>number</th>
 <th>totalPrice</th>
 <th>option</th>
 </tr>
 <!--用ng-repaet指令将对象遍历并渲染到页面中-->
 <tr ng-repeat="item in arr">
 <td><input type="checkbox" ng-model="item.state" ng-click="itemCheck()"/></td>
 <td>{{item.name}}</td>
 <td>{{item.price | currency:"￥："}}</td>
 <td><button ng-click="jian($index)">-</button>
 <input type="text" value="{{item.number}}" style="width: 30px;padding-left: 20px"/>
 <button ng-click="jia($index)">+</button>
 </td>
 <td>{{item.price*item.number | currency:"￥："}}</td>
 <td><button ng-click="del($index)">删除</button></td>
 </tr>
 <tr>
 <td colspan="6">总金额<span ng-bind="allSum()|currency:'￥：'"></span></td>
 </tr>
 </table>
 </div>
</body>
</html>

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

angular.js实现购物车功能

推荐度：

点击下载本文 文档为doc格式

标签：购物车 js angularjs

热门焦点

angular.js实现购物车功能

angular.js实现购物车功能

angular.js实现购物车功能

最新推荐

猜你喜欢

热门推荐