<!DOCTYPE html>

<html ng-app="shopping">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css"/>

    <style type="text/css">

        .orderSelect

        {

            color: red;

        }

    </style>

</head>

<body>

    <div class="container">

     <div ng-controller="goodsList">

         <nav class="navbar navbar-default" role="navigation">

             <form class="navbar-form navbar-left" role="search">

                 <input type="text" ng-model="search" class="form-control" placeholder="搜索">

             </form>

         </nav>

         <table class="table table-bordered table-hover" ng-show="goods.length">

            <thead>

             <tr class="success">

                 <!--ng-class="{dropup: order===''}"的这个部分order===''是一个表达式如果为真则添加前面的样式-->

                 <th ng-click="orderGoods('id')" ng-class="{dropup: order===''}">

                     产品编号<span class="caret"  ng-class="{orderSelect: orderType==='id'}" ></span>

                 </th>

                 <th ng-click="orderGoods('name')" ng-class="{dropup: order===''}">

                     产品名字<span class="caret" ng-class="{orderSelect: orderType==='name'}" ></span>

                 </th>

                 <th ng-click="orderGoods('sum')" ng-class="{dropup: order===''}">

                     购买数量<span class="caret"  ng-class="{orderSelect: orderType==='sum'}"></span>

                 </th>

                 <th ng-click="orderGoods('unitPrice')" ng-class="{dropup: order===''}">

                     产品单价<span class="caret" ng-class="{orderSelect: orderType==='unitPrice'}" ></span>

                 </th>

                 <th ng-click="orderGoods('unitPrice * sum')" ng-class="{dropup: order===''}">

                     产品总价<span class="caret" ng-class="{orderSelect: orderType==='unitPrice * sum'}" ></span>

                 </th>

                 <th>

                     操作

                 </th>

             </tr>

            </thead>

            <tbody>

                <!--可以使用过滤器提供搜索功能->filter: {name:search}-->

                <tr class="info" ng-repeat="item in goods | filter: {name:search} | orderBy: order + orderType">

                    <td><span ng-bind="item.id"></span></td>

                    <td><span ng-bind="item.name"></span></td>

                    <td>

                        <input type="button" value="-" class="btn" ng-click="subNumber(item.id)"/>

                        <input type="text" class="text-center" ng-model="item.sum"/>

                        <input type="button" value="+" class="btn" ng-click="addNumber(item.id)"/>

                    </td>

                    <!--过滤器 {{xxx | currency:'￥ '}}-->

                    <td><span ng-bind="item.unitPrice | currency:'￥ '"></span></td>

                    <td><span ng-bind="item.sum * item.unitPrice | currency:'￥ '"></span></td>

                    <td><input type="button" value="移除" class="btn btn-danger" ng-click="remove(item.id)"/></td>

                </tr>

                <tr class="warning">

                    <td colspan="2">购买总价：<span ng-bind="sumPricesFn() | currency:'￥ '"></span></td>

                    <td colspan="2">购买总数：<span ng-bind="sumFn()"></span></td>

                    <td colspan="2"><input type="button" value="清空购物车" class="btn btn-danger" ng-click="clear()"/></td>

                </tr>

            </tbody>

         </table>

        <div ng-show="!goods.length">您的购物车为空！</div>

     </div>

    </div>

</body>

<script src="../angular.js"></script>

<script>

    var app=angular.module("shopping",[]);

    app.controller("goodsList", function($scope){

        $scope.goods=[

            {

                id:1,

                name:'苹果6Plus',

                sum:3,

                unitPrice:5000

            },

            {

                id:2,

                name:'苹果5s',

                sum:1,

                unitPrice:4000

            },

            {

                id:3,

                name:'lenovo P404',

                sum:1,

                unitPrice:3899

            },

            {

                id:4,

                name:'飞科剃须刀f77',

                sum:10,

                unitPrice:100

            },

            {

                id:5,

                name:'情侣体恤',

                sum:2,

                unitPrice:110

            }

        ];

        //单件商品总价

        $scope.sumPricesFn = function(){

            var sumPrices = 0;

            angular.forEach($scope.goods,function(item){

                sumPrices += item.sum * item.unitPrice;

            });

            return sumPrices;

        };

        //单件商品总数

        $scope.sumFn = function(){

            var sum = 0;

            angular.forEach($scope.goods,function(item){

                sum += Number(item.sum);

            });

            return sum;

        };

        var getIndex = function(id){

            var stateIndex = -1;

            angular.forEach($scope.goods, function(item, index){

                if(id === item.id){

                    stateIndex = index;

                }

            });

            return stateIndex;

        }

        //移除方法

        $scope.remove = function(id){

            var tmpGoodIndex = getIndex(id);

            if(tmpGoodIndex !== -1){

                //将从索引位置为stateIndex删除一个值

                $scope.goods.splice(tmpGoodIndex, 1);

            }

        };

        //清空购物车方法

        $scope.clear = function(){

            $scope.goods=[];

        }

        //增加商品数量

        $scope.addNumber = function(id){

            var tmpGoodIndex = getIndex(id);

            if(tmpGoodIndex !== -1){

                ++$scope.goods[tmpGoodIndex].sum;

            }

        };

        //减少商品数量

        $scope.subNumber = function(id){

            var tmpGoodIndex = getIndex(id);

            if(tmpGoodIndex !== -1){

                --$scope.goods[tmpGoodIndex].sum;

            }

        };

        $scope.$watch('goods', function(newVal, oldVal){

            angular.forEach(newVal,function(item, index){

                //监听商品信息如果为非法字符那么回归原来的商品数量

                if(isNaN(item.sum) || item.sum < 0){

                    item.sum = oldVal[index].sum;

                }

            });

        },true);

        //列表排序

        /*

        * $scope.order = '-';这个'-'代表倒序

        * */

        $scope.order = '-';

        $scope.orderType = 'id';

        $scope.orderGoods = function(type){

            if($scope.order === '-'){

                $scope.order = '';

            } else {

                $scope.order = '-';

            }

            $scope.orderType = type;

        };

    });

</script>

</html>

angularJS商品购物车案例的更多相关文章

  1. Vue(五) 购物车案例

    这一篇把之前所学的内容做一个总结,实现一个购物车样例,可以增加或者减少购买数量,可移除商品,并且购物车总价随着你的操作实时变化. 实现效果如图: 代码: <!DOCTYPE html> & ...

  2. easyUI拖动购物车案例

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  3. Vue实战-购物车案例

    Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...

  4. jQuery基础入门+购物车案例详解

    jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...

  5. AngularJS路由使用案例

    AngularJS路由使用案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  6. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  7. 零基础学习java------34---------登录案例，域，jsp(不太懂)，查询商品列表案例（jstl标签）

    一. 简单登录案例 流程图: 项目结构图 前端代码: <!DOCTYPE html> <html> <head> <meta charset="UT ...

  8. jQuery 购物车案例

    h1 { text-align: center; } .cart { width: 1200px; height: 600px; margin: 0 auto; border: 1px solid # ...

  9. vue实现商品购物车全选与全不选项目实战

    项目需求: 实现一个购物车 全选框实现对商家和商品的全选 商家全选框实现对当前商家所有商品的全选 取消其中一个商品则取消对应商家全选和全选框 选中一个商家下的所有商品则勾选对应商家的全选框,不勾选全选 ...

随机推荐

  1. extjs grid

    Ext.onReady(function() { Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif'; Ext.QuickTips.in ...

  2. ios7隐藏系统底部导航

    ios7隐藏系统底部导航 minimal-ui <meta id="viewport" name="viewport" content="wid ...

  3. TYVJ P1075 硬币游戏 Label：dp

    背景 农民John的牛喜欢玩硬币,所以John就为它们发明了一个新的两人硬币游戏,叫做Xoinc. 描述 最初地面上有一堆n个硬币(5<=n<=2000),从上面数第i个硬币的价值为C_i ...

  4. 【SPOJ】1812. Longest Common Substring II（后缀自动机）

    http://www.spoj.com/problems/LCS2/ 发现了我原来对sam的理解的一个坑233 本题容易看出就是将所有匹配长度记录在状态上然后取min后再对所有状态取max. 但是不要 ...

  5. HNOI2015

    终于把湖南省的省选题切了(贵省真是厉害). T1 http://www.cnblogs.com/wzj-is-a-juruo/p/5228858.html T2 http://www.cnblogs. ...

  6. 从JAVA客户端访问Redis示例(入门)

    转自:http://blog.csdn.net/kkdelta/article/details/7217761 本文记录了安装Redis和从JAVA端访问Redis的步骤 从http://downlo ...

  7. mac 下的 top 命令

    mac 下的 top 命令 文章目录 以前只是在 linux 机器上使用 top 命令.常用的快键键是: p 键 - 按 cpu 使用率排序 m 键 - 按内存使用量排序 这 2 个快捷键在 mac ...

  8. iOS学习—JSON数据解析

      关于在iOS平台上进行JSON解析,已经有很多第三方的开源项目,比如TouchJson,JSONKit,SBJon等,自从iOS5.0以后,苹果SDK推出了自带的JSON解决方案NSJSONSer ...

  9. 硬盘参数之TLER

    “你们根本不知道nas盘是用来干啥的,准确的说,要nas盘就是要tler技术,这样才适合用在nas上. TLER=Time-Limited Error Recovery 这么说吧,普通的硬盘(不带TL ...

  10. 字符编解码的故事（ASCII，ANSI，Unicode，Utf-8区别）

    (关于字符编码的深入解释,请参见我的原创文章<关于字符编码,你所需要知道的>.) 此文为转载,有少许修订,原文出处不详. 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同 ...