<!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. JMeter学习-032-JMeter常见四种变量简介

    在JMeter自动化测试脚本编写过程中,经常需要对测试脚本进行一些参数设置.例如,设置测试计划的全局变量(方便切换不同的测试环境).样本线程(HTTP请求等)的参数传递等. 通常,JMeter中常用的 ...

  2. Sublime、Webstorm等在APICloud平台上全面支持WiFi真机同步和实时预览功能

    APICloud工具插件包括APICloud Studio.Sublime Text和Webstorm全面为开发者提供iOS和Android平台真机同步调试功能,不仅可以通过USB方式进行APP真机同 ...

  3. LoadRunner调用Oracle存储过程

    为了测试这个存储过程,我遥了一圈去做这个事情,这里说一下我自己接受到任务和自己开始是怎么想的. 方法一: 一开始我想着可以使用C#直接去调用存储过程,然后用Loadrunner调用C#的dll去测试, ...

  4. Computop支付网关(一) credit Card

    1.界面没有中文,只能选择英文 sp – Spanish; en – English; ca – Catalan; fr – French; de – German; du – Dutch; it – ...

  5. 编译错误：/usr/bin/ld: cannot find -lz

    编译时出现错误/usr/bin/ld: cannot find -lz,安装zlib和zlib-devel yum install zlib yum install zlib-devel

  6. Swift 写纯洁的TableviewCell

    let initIdentifier = "员工" var cell = tableView.dequeueReusableCell(withIdentifier: initIde ...

  7. scott/tiger登录时提醒ora-28000 the account is locked

    scott/tiger登录时提示ora-28000 the account is locked在plsql developer中要是以scott/tiger登录时提示ora-28000 the acc ...

  8. MultiWiiWinGUI 汉化版

    已经基本汉化完毕 下载

  9. FreeBSD 查看硬件信息

    systat 能实时查看各种信息 systat -pigs 默认值CPU systat -iostat 硬盘IO systat -swap 交换分区 systat -mbufs 网络缓冲区 systa ...

  10. SQL用先进先出存储过程求出库数量

    create table t( id ,), name ),--商品名称 j int, --入库数量 c int, --出库数量 jdate datetime --入库时间 ) ,,'2007-12- ...