Angularjs购物车计算价格例子

来源：互联网发布：网络舆论利大于弊一辩编辑：程序博客网时间：2024/04/29 09:44
这里写图片描述
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/angular.min.js"></script>        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>    </head>    <body ng-app="Mapp" ng-controller="Mctrl">        <table border="1" cellspacing="0" cellpadding="0">            <tr>                <th>购物车</th>            </tr>            <tr>                <td><input type="checkbox" />趣艺工坊</td>            </tr>            <tr ng-repeat="item in items">                <td>                    <input type="checkbox" ng-click="sel($index)" class="checkbox1" />                    <img src="" title="图片" /> {{item.name}}                    <br /> {{item.price|currency:"￥"}}                    <button ng-click="jian($index)">-</button> {{item.num}}                    <button ng-click="jia($index)">+</button>                    <button ng-click="del($index)">删除</button>                </td>            </tr>            <tr>                <td>                    <input type="checkbox" ng-click="allselect()" ng-model="all" />全选 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 合计:{{allmoney|currency:"￥"}}                </td>            </tr>        </table>        <script>            angular.module("Mapp", [])                .controller("Mctrl", function($scope) {                    var arr = [{                        name: '纯手工制作木质精致家具装饰摆件1',                        price: 150,                        num: 1,                        isChecked: false,                    }, {                        name: '纯手工制作木质精致家具装饰摆件2',                        price: 119,                        num: 2,                        isChecked: false,                    }, {                        name: '纯手工制作木质精致家具装饰摆件3',                        price: 120,                        num: 1,                        isChecked: false,                    }]                    $scope.items = arr;                    jisuan();                    //点-                    $scope.jian = function($index) {                        arr[$index].num -= 1;                        if(arr[$index].num < 1) {                            arr[$index].num = 1;                        }                        jisuan();                    }                    //点+                    $scope.jia = function($index) {                        arr[$index].num += 1;                        jisuan();                    }                    //单选                    $scope.sel = function($index) {                        arr[$index].isChecked = $(".checkbox1")[$index].checked;                        jisuan();                    }                    //全选                    $scope.allselect = function() {                        for(var i = 0; i < arr.length; i++) {                            arr[i].isChecked = $scope.all;                            $(".checkbox1")[i].checked = $scope.all;                            jisuan();                        }                    }                    //删除                    $scope.del = function($index) {                        arr.splice($index, 1);                        jisuan();                    }                    //计算方法                    function jisuan() {                        $scope.allmoney = 0;                        for(var i = 0; i < arr.length; i++) {                            if(arr[i].isChecked) {                                $scope.allmoney += arr[i].price * arr[i].num;                            }                        }                    }                })        </script>    </body></html>
阅读全文
0 0