<!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. anjularjs常用的内置方法

    1.$apply anjularjs通过$apply方法去执行脏检查,及时告诉model绑定变量更新. 示例:定义一个date变量显示在页面上,它的控制器是firstCtrl,这个date变量有一个时 ...

  2. Python 面向对象（初级篇）

    51CTO同步发布地址:http://3060674.blog.51cto.com/3050674/1689163 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后 ...

  3. jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque

    问题: XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present ...

  4. 分享一组矢量图标–UX图标字体库

    以下内容转自:http://ux.etao.com/,原文链接:http://ued.alimama.com/posts/219 科技日新月异的今天,市面上各种分辨率.各种显示精度的显示设备层出不穷, ...

  5. sql语句注意事项

    1两表根据a字段关联,把t2表中的c字段值更新到t1表中的c字段update T1set T1.C =(select T2.C from T2 where T1.A = T2.A)where exis ...

  6. [转]一个用户SQL慢查询分析，原因及优化

    来源:http://blog.rds.aliyun.com/2014/05/23/%E4%B8%80%E4%B8%AA%E7%94%A8%E6%88%B7sql%E6%85%A2%E6%9F%A5%E ...

  7. window10 安装SVN 提示权限问题

     http://www.yishimei.cn/network/551.html 经常在网上看到有同学反映,他们在控制面板里卸载软件的时候,总是会出现2502.2503错误代码的问题,并且这个问题大多 ...

  8. HTML5 input placeholder 颜色修改

    在开发中遇到的一个小问题,记录下来./*placehodel*/ input:-ms-input-placeholder{color:#a9a9a9;}/* Internet Explorer 10+ ...

  9. LoadRunner培训初级教程

    一 LoadRunner简介 1.1 Loadrunner介绍 LoadRunner 是 HP Mercury Interactive 用来测试应用程序性能的工具  LoadRunner 通过模拟一个 ...

  10. OC-03类的声明和实现

    例子 //类名:Car//属性:轮胎个数.时速//行为:跑 #import<Foundation/Foundation.h >//完整的写一个函数:函数的声明和定义(实现)//完整的写一个 ...