<!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. 纯手写SpringMVC架构，用注解实现springmvc过程

    1.第一步,首先搭建如下架构,其中,annotation中放置自己编写的注解,主要包括service controller qualifier RequestMapping 第二步:完成对应的anno ...

  2. apche配置后报错（Forbidden）没有权限

    apche如何配置虚拟目录及虚拟目录的权限 <Directory /> Options FollowSymLinks AllowOverride None Order deny,allow ...

  3. Java提高篇——单例模式

    介绍 在我们日常的工作中经常需要在应用程序中保持一个唯一的实例,如:IO处理,数据库操作等,由于这些对象都要占用重要的系统资源,所以我们必须限制这些实例的创建或始终使用一个公用的实例,这就是我们今天要 ...

  4. Android下安装应用不成功解决

    在手机上安装应用程序不成功,可以尝试把手机连接电脑,然后使用adb进行安装,adb安装命令: adb install Android_65632.apk 当出现: success!就表示成功,但当不成 ...

  5. ndt histogram_direction

    histogram_direction N_FLAT_BINS=40; dlong = pi*(3-sqrt(5.0)); % ~2.39996323 dz = 2.0/N_FLAT_BINS; lo ...

  6. logstash redis kafka传输 haproxy日志

    logstash 客户端收集 haproxy  tcp日志 input { file { path => "/data/haproxy/logs/haproxy_http.log&qu ...

  7. 多节点ssh免密匙登录

    1,在所有节点上,使用yourname用户名执行: ssh-keygen -t dsa -P '' -f /home/yourname/.ssh/id_dsa 2,在node1的/home/yourn ...

  8. linux-----------centos上搭建了lnmp环境，项目也上传上去了，刚开始没事，后来重启了以后就不行了。

    关闭防火墙就可以了.或者你打开防火墙对80端口的限制. systemctl stop firewalld.service #停止firewall systemctl start firewalld.s ...

  9. mysqldump导出

    mysqldump -u user -p dbname table1 table2 > db.sql mysql执行sql mysql –uroot –p -Dtest < 1.sql

  10. 如何使用iTunes与iTools导出微信聊天记录

    .tocblock .tocblock .tocblock { margin-left: 2.25em; } .madoko .toc>.tocblock .tocblock { margin- ...