angular+做一个购物车可以删除，计算总额

来源：互联网发布：js数组取前几个编辑：程序博客网时间：2024/04/30 12:08
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="angular/angular.js"></script>   <style>       table{           width: 500px;           height: 300px;           border-collapse: collapse;           text-align: center;       }       td{           border: 1px solid black;       }   </style>    <script>        var myapp=angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope) {            $scope.goods=[{                gname:"iphone8",                num:"3",                price:"999"            },{                gname: "iphone7",                num: "4",                price: "599"            },{                gname: "iphone6",                num: "5",                price: "499"            },{                gname: "iphone5",                num: "6",                price: "399"            }            ];            $scope.allSum=function () {                var allPrice=0;                for(var i=0;i<$scope.goods.length;i++){                    allPrice+=$scope.goods[i].price*$scope.goods[i].num;                }                return allPrice;            };            $scope.remove=function (index) {                if(confirm('确定移除此项嘛？')){                    $scope.goods.splice(index,1);                }                if($scope.goods.length==0){                    alter('你的购物车为空');                }            };        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><table>    <tr>        <td colspan="5">你的购物车</td>        <tr>    <td>商品名称</td>    <td>数量</td>    <td>单价</td>    <td>小计</td>    <td>操作</td>    </tr>    <tr ng-repeat="arr in goods">        <td>{{arr.gname}}</td>        <td>{{arr.num}}</td>        <td>{{arr.price|currency:"RMB￥"}}</td>        <td>{{arr.num*arr.price|currency:"RMB￥"}}</td>        <td><button ng-click="remove($index)">删除</button></td>    </tr>    <tr>        <td colspan="5">总金额<span ng-bind="allSum()|currency:'RMB'"></span></td>    </tr></table></body></html>
阅读全文
0 0