今天给大家分享一个购物车的例子,希望对大家有所帮助

最新推荐文章于 2021-04-05 21:39:14 发布

努力努力更努力

最新推荐文章于 2021-04-05 21:39:14 发布

阅读量361

点赞数 1

分类专栏： angluarjs

本文链接：https://blog.csdn.net/qq_40317838/article/details/78058781

版权

angluarjs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <style>
        button{
            background: red;
        }
    </style>
    <script>
        var my=angular.module("my",[]);
        my.controller("mys",function ($scope) {
            /*随意添加数据*/
            $scope.data=[
                {name:"iPhone8",count:1,price:"8888"},
                {name:"iPhone9",count:1,price:"9888"},
                {name:"iPhone2s",count:1,price:"3888"},
                {name:"iPhone7p+",count:1,price:"10088"}
                ]
            /*删除一个*/
            $scope.del=function (index) {
                if(confirm('确定移除此项嘛？')){
                    $scope.data.splice(index,1);
                }
            };

            //增加
            $scope.incr = function(index){
                $scope.data[index].count++;
            }
            //减少
            $scope.decr = function(index){
                if($scope.data[index].count > 1){
                    $scope.data[index].count--;
                }
            }
            /*总价格*/
            $scope.allSum=function () {
                var allPrice=0;
                for(var i=0;i<$scope.data.length;i++){
                    allPrice+=$scope.data[i].price*$scope.data[i].count;
                }
                return allPrice;
            };
            /*总个数*/
            $scope.allNum=function () {
                var allnumber=0;
                for(var i=0;i<$scope.data.length;i++){
                    allnumber+=$scope.data[i].count;
                }
                return allnumber;
             };
            /*清空购物车*/
            $scope.qingkong=function () {
                if($scope.data.length==0){
                    alert('你的购物车为空');
                }else{
                    $scope.data=[];
                }
            }
        })
    </script>
</head>
<body ng-app="my" ng-controller="mys">
    <table border="1" width="600">
        <tr>
            <th>产品编号</th>
            <th>产品名称</th>
            <th>购买数量</th>
            <th>产品单价</th>
            <th>产品总价</th>
            <th>操作</th>
        </tr>
        <tr ng-repeat="item in data">
            <td>{{$index+1}}</td>
            <td>{{item.name}}</td>
            <td>
                <button ng-click="decr($index)">-</button>
                <input type="text" ng-model="item.count" readonly="">
                <button ng-click="incr($index)">+</button>
            </td>
            <td>{{item.price}}</td>
            <td>{{item.price*item.count}}</td>
            <td><button ng-click="del($index)">删除</button></td>
        </tr>
        <tr>
            <td colspan="6">总金额<span ng-bind="allSum()|currency:'RMB￥'"></span></td>
        </tr>
        <tr>
            <td colspan="4">总数量<span ng-bind="allNum()"></span></td>
            <td colspan="2"><button ng-click="qingkong()">清空购物车</button></td>
        </tr>
    </table>
</body>
</html>