angularjs简单购物车源码

来源：互联网发布：wingware python ide 编辑：程序博客网时间：2024/05/22 17:01

显示：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../vendor/bootstrap3/css/bootstrap.min.css"></head><body ng-app>    <div class="container"  ng-controller="cartController">        <table class="table" ng-show="cart.length">            <thead>                <tr>                    <th>产品编号</th>                    <th>产品名字</th>                    <th>购买数量</th>                    <th>产品单价</th>                    <th>产品总价</th>                    <th>操作</th>                </tr>            </thead>            <tbody>                <tr ng-repeat="item in cart">                    <td>{{item.id}}</td>                    <td>{{item.name}}</td>                    <td>                        <button type="button" ng-click="reduce(item.id)" class="btn btn-primary">-</button>                        <input type="text" value="{{item.quantity}}" ng-model="item.quantity" />                        <button type="button" ng-click="add(item.id)" class="btn btn-primary">+</button>                    </td>                    <td>{{item.price}}</td>                    <td>RMB {{item.price * item.quantity}}</td>                    <td>                        <button type="button" ng-click="remove(item.id)" class="btn btn-danger">移除</button>                    </td>                </tr>                <tr>                    <td>                        总购买价                    </td>                    <td>                        {{totalPrice()}}                    </td>                    <td>                        总购买数量                    </td>                    <td>                        {{totalQuantity()}}                    </td>                    <td colspan="2">                        <button type="button" ng-click="cart = {}" class="btn btn-danger">清空购物车</button>                    </td>                </tr>            </tbody>        </table>        <p ng-show="!cart.length">您的购物车为空</p>    </div>    <script type="text/javascript" src="../vendor/angular/angularjs.js"></script>    <script type="text/javascript" src="./app/index.js"></script></body></html>

实现类模块：

var cartController = function ($scope) {    $scope.cart = [        {            id:1000,            name:'iphone5s',            quantity:3,            price:4300        },        {            id:3300,            name:'iphone5',            quantity:30,            price:3300        },        {            id:232,            name:'imac',            quantity:4,            price:23000        },        {            id:1400,            name:'ipad',            quantity:5,            price:6900        }    ];    /**     * 计算总价     */    $scope.totalPrice = function () {        var totalPrice = 0;        angular.forEach($scope.cart, function (item) {            totalPrice += item.quantity * item.price;        })        return totalPrice;    }    /**     * 计算总购买数     */    $scope.totalQuantity = function () {        var total = 0;        angular.forEach($scope.cart, function (item) {            total += parseInt(item.quantity);        })        return total;    }    /**     * 找一个元素的索引     */    var findIndex = function (id) {        var index = -1;        angular.forEach($scope.cart, function (item, key) {            if(item.id === id){                index = key;            }        });        return index;    }    /**     * 添加购买数量     * @param id     */    $scope.add = function (id) {        var index = findIndex(id);        if(index != -1){            ++$scope.cart[index].quantity;        }    }    /**     * 减少购买数量     * @param id     */    $scope.reduce = function (id) {        var index = findIndex(id);        if(index != -1){            var item = $scope.cart[index];            if(item.quantity > 1){                --item.quantity;            } else {                var returnKey = confirm('从购物车内删除该物品？');                if(returnKey){                    $scope.remove(id);                }            }        }    }    /**     * 按id删除方法     * @param id     */    $scope.remove = function (id) {        var index = findIndex(id);        if(index != -1){            $scope.cart.splice(index,1);        }    }    $scope.$watch('cart', function (newValue, oldValue) {        angular.forEach(newValue, function (item, key) {            if(item.quantity < 1){                var returnKey = confirm('从购物车内删除该物品？');                if(returnKey){                    $scope.remove(id);                } else {                    item.quantity = oldValue[key].quantity;                }            }        })    },true)}

效果图：

阅读全文

0 0