<!DOCTYPE html>
<html ng-app="app">
 
<head>
    <meta charset="utf-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    body {
        font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    }
    </style>
</head>
 
<body>
    <div class="container" ng-controller="firstController">
        <table class="table">
            <thead>
                <tr>
                    <th>产品编号</th>
                    <th>产品名称</th>
                    <th>购买数量</th>
                    <th>产品单价</th>
                    <th>产品总价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in Product">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <button type="button" class="btn" ng-click="reduce($index)">-</button>
                        <input type="text" name="" value="" placeholder="" ng-model="item.quantity">
                        <button type="button" class="btn" ng-click="add($index)">+</button>
                    </td>
                    <td>{{item.price}}</td>
                    <td>{{item.quantity*item.price}}</td>
                    <td>
                        <button type="button" class="btn btn-danger" ng-click="remove($index)">移除</button>
                    </td>
                </tr>
                <tr>
                    <td>总价格：{{totalPrice()}} 元</td>
                    <td colspan="4">总购买数：{{totalQuantity()}}</td>
                    <td>
                        <button type="button" class="btn btn-danger" ng-click="removeall()">清空购物车</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('app', []).controller('firstController',
        function($scope) {
            $scope.Product = [{
                id: 1000,
                name: "iPhone 6 Plus",
                quantity: 1,
                price: 6888
            }, {
                id: 1001,
                name: "iPhone 6",
                quantity: 1,
                price: 5288
 
            }, {
                id: 1002,
                name: "iPhone 5s",
                quantity: 1,
                price: 4188
            }, {
                id: 1003,
                name: "iPhone 5c",
                quantity: 1,
                price: 3288
            }];
 
            $scope.totalPrice = function() {
                var total = 0;
                angular.forEach($scope.Product, function(item) {
                    total += item.quantity * item.price;
                });
                return total;
            }
 
            $scope.totalQuantity = function() {
                var total = 0;
                angular.forEach($scope.Product, function(item) {
                    total += parseInt(item.quantity);
                });
                return total;
            }
 
            $scope.remove = function(index) {
                $scope.Product.splice(index, 1);
            }
 
            $scope.removeall = function() {
                var index;
                for (index = $scope.Product.length - 1; index >= 0; index--) {
                    $scope.remove(index);
                }
            }
 
            $scope.reduce = function(index) {
                if ($scope.Product[index].quantity != 1) {
                    $scope.Product[index].quantity--;
                } else {
                    var ans = confirm("是否移除该产品？");
                    if (ans) {
                        $scope.remove(index);
                    } else {
                        $scope.Product[index].quantity = 1;
                    }
                }
            }
 
            $scope.add = function(index) {
                $scope.Product[index].quantity++;
            }
 
            $scope.$watch('Product', function(newValue, oldValue) {
                angular.forEach(newValue, function(item, key) {
                    if (item.quantity < 1) {
                        var ans = confirm("是否移除该产品？");
                        if (ans) {
                            $scope.remove(key);
                        } else {
                            item.quantity = oldValue[key].quantity;
                        }
                        return;
                    }
                });
            }, true);
 
        });
    </script>
</body>
 
</html>

angularJS: shop chart的更多相关文章

  1. [D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive

    Integrating D3 with Angular can be very simple. In this lesson, you will learn basic integration as ...

  2. ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）

    一.背景:      我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/      我们知 ...

  3. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  4. angularjs结合d3js实现资源展示

    转载请注明出处: 转载自Bin's Blog:  angularjs & d3 实现资源展示( http://www.wenbin.cf/post/27/ ) angularjs结合d3js实 ...

  5. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  6. angularJS之$watch的一个小介绍

    现在最近公司项目使用angularJS进行开发:以前也接触过但是不多,趁着现在熟悉回来. 如题,angular中$watch也是我们在开发的时候需要的各种监听: $watch接收3个参数,第一个是对象 ...

  7. AngularJS in Action读书笔记6(实战篇)——bug hunting

    这一系列文章感觉写的不好,思维跨度很大,原本是由于与<Angularjs in action>有种相见恨晚而激发要写点读后感之类的文章,但是在翻译或是阐述的时候还是会心有余而力不足,零零总 ...

  8. AngularJS引入Echarts的Demo

    最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试, ...

  9. AngularJs基础总结(1.4版本)

    注明:现在用的是最新的1系列1.4版本. 一.细节方面入手: 1,ng-app根节点,一般别写在html上面,最多也就写在body就行了,因为我们难免会忘记这个写在哪里,然后复制一些案例代码却总报错. ...

随机推荐

  1. MAC破解软件

    作为一个iOS程序开发的工程师,我们需要的是那些辅助的利器 但是这些利器确实需要高价购买的 reveal系统层级关系 Charles网络抓包破解 蓝灯(FQ必备) 小黑冒(搜索必备) Cornerst ...

  2. Python开发【十一章】：数据库操作Memcache、Redis

    一.Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...

  3. randow()方法

    Math库里的static(静态)方法random(),该方法的作用是产生0和1之间的一个double值. 注意产生的值包括0不包括1.

  4. AFN和ASI区别

    AFN和ASI区别 一.AFN和ASI的区别 1.底层实现1> AFN的底层基于OC的NSURLConnection和NSURLSession2> ASI的底层基于纯C语言的CFNetwo ...

  5. c语言1

    1.c语言的执行过程: 源代码:source code,使用某种计算机语言书写的代码. 编译:compile 对源代码进行翻译的过程. 编译器:compiler 负责编译工具. gcc:一款通用的编译 ...

  6. List转换成XML

    protected void Button1_Click(object sender, EventArgs e) { var customerlist = CustomerHelper.GetList ...

  7. EF 延迟加载和预先加载

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精   本节探讨延迟加载和预先加载 Entity Frame ...

  8. 在virtualbox中安装CentOS-7

    当初才接触linux的时候,因为条件限制,只能在虚拟机中安装linux系统使用,由于是小白,爬了好多坑.于是决定写一篇关于在虚拟机中安装linux系统的博客.一是为了巩固自己的知识,二是希望能够对新手 ...

  9. Android studio 运行设置

    在下载完SDK和Android studio后,修改android studio安装目录下bin/idea.properties文件,在末尾添加:idea.fatal.error.notificati ...

  10. 夺命雷公狗-----React---27--小案例之react经典案例todos（清除已完成）

    这个功能其实也是很简单的,就只是让todos里面的内isDown进行取反即可 然后在Zong里面进行下修改即可 效果如下所示: 代码如下所示: <!DOCTYPE html> <ht ...