<!DOCTYPE html>

<html lang="en" ng-app="shopApp">

<head>

    <meta charset="UTF-8">

    <title>angular购物车小计</title>

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

    <script>

        //angular的模块化，模块名是ng-app定义的模块名，ng-app='模块名'是指定从哪个模块开始初始化

        var shopApp=angular.module('shopApp',[]);

        //angular的写法是shopApp.controller('函数名',function($scope){});，但是这种写法在压缩代码的时候会改变参数$scope,导致angular不识别这个被改变的参数

        shopApp.controller('shopCar',['$scope',function($scope){

            //在$scope上定义一个变量，使用json来存储需要使用的数据

            $scope.phone={

                price:,

                num:,

                fre:

            };

            //同样的再$scope上也可以添加求和方法，并返回到需要的数据中,在angular中方法作用域变量会优先找自己作用域中的变量值，如果找不到会一级一级的往上找

            $scope.sum=function(){

                return $scope.phone.price * $scope.phone.num;

            };

            //监听运费的实时变化，当购物金额大于5000元的时候免运费，当购物金额小于5000元的时候运费为10元

            $scope.$watch($scope.sum,function(newVal,oldVal){

                $scope.phone.fre=newVal >= ?  :  ;

            },true);

        }]);

    </script>

</head>

<body>

    <div ng-controller="shopCar">

        <p>价格：<input type="text" ng-model="phone.price"></p>

        <p>个数：<input type="text" ng-model="phone.num"></p>

        <p>商品总价：<span>{{sum() | currency:'￥'}}</span></p>

        <p>运费合计：<span>{{phone.fre | currency:'￥'}}</span></p>

        <p>总计：<span>{{sum() + phone.fre | currency:'￥'}}</span></p>

    </div>

</body>

</html>

简单的angular购物车商品小计的更多相关文章

  1. 购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能

    效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. e3mall商城总结12之购物车的实现、以及购物车小计问题、json406报错

    说在前面的话 1.本节主要讲了e3mall购物车的实现方法,我搭建的项目和系统购物车有一些区别,因此这里需要说一下.系统搭建的项目在未登陆的情况下也可以通过cookie进行加入购物车,当用户要下单的时 ...

  3. python实现简单的循环购物车小功能

    python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...

  4. 用java代码写一个简单的网上购物车程序

    需求:1.写一个商品类,有商品编号.商品名称.商品分类.商品单价属性.2.写一个商品条目信息类,有商品和数量两个属性,有商品总价格方法. 3.写一个购物车类,有添加商品方法.查看订单信息,删除商品,修 ...

  5. 每日学习心得：SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）

    2013-8-20 1.    SQL查询表的行列转换/小计/统计(with  rollup,with cube,pivot解析) 在实际的项目开发中有很多项目都会有报表模块,今天就通过一个小的SQL ...

  6. 用SQL实现统计报表中的"小计"与"合计"的方法详解

    本篇文章是对使用SQL实现统计报表中的"小计"与"合计"的方法进行了详细的分析介绍,需要的朋友参考下   客户提出需求,针对某一列分组加上小计,合计汇总.网上找 ...

  7. SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）

    SQL查询表的行列转换/小计/统计(with rollup,with cube,pivot解析) 2013-8-20 1.    SQL查询表的行列转换/小计/统计(with  rollup,with ...

  8. JXLS 2.4.0系列教程（四）——拾遗 如何做页面小计

    注:阅读本文前,请先阅读第四篇文章. http://www.cnblogs.com/foxlee1024/p/7619845.html 前面写了第四篇教程,发现有些东西忘了讲了,这里补回来. 忘了讲两 ...

  9. 简单的python购物车

                 这几天,一直在学python,跟着视频老师做了一个比较简单的python购物车,感觉不错,分享一下 products = [['Iphone8',6888],['MacPro ...

随机推荐

  1. 利用SCORE法则来总结一次偷懒的单元测试过程

    最近遇到一个单元测试的问题,本周正好学个了一个SCORE法则,这里正好练练手应用此法则将问题的前因后果分享给大家. S:背景  代码要有单元测试,检测的标准就是统计代码的单元测试覆盖率,程序员需要达到 ...

  2. MVC中实现Area几种方法

    概述        ASP.NET MVC中,是依靠某些文件夹以及类的固定命名规则去组织model实体层,views视图层和控制层的.如果是大规模的应用程序,经常会由不同功能的模块组成,而每个功能模块 ...

  3. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  4. CentOS桌面安装

    1.显示系统已经安装的组件,和可以安装的组件: #yum grouplist 2.如果系统安装之初采用最小化安装,没有安装xwindow,那么先安装: #yum groupinstall " ...

  5. 开发培训及技术研讨会PPT下载链接

    8月到9月,我们做了一圈巡回演出,脚步踏遍祖国大江南北,包括沈阳.武汉.深圳.香港.上海和北京等几个城市,给大家带来Autodesk最新的云技术和桌面产品技术动态,得到了大家的热烈响应.感谢各位合作伙 ...

  6. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  7. 【原】Github系列之二：开源 一行代码实现多形式多动画的推送小红点WZLBadge(iOS)

    更新日志 V1.2 2015.09.25 1.UITabBarItem badge is supproted; 2.Enable change badge properties when badge ...

  8. Android 应用程序集成FaceBook 登录及二次封装

    1.首先在Facebook 开发者平台注册一个账号 https://developers.facebook.com/ 开发者后台  https://developers.facebook.com/ap ...

  9. Objective-C Mojo和Django 对接

    最近在做资料类app需要一个好的资源管理工具,excel在这方面非常好,不过能第一非常low,第二数据量一大查询就是个问题. 因此,我使用django做了个资源管理小工具.好处还是很明显的 (1)可以 ...

  10. Orchard中如何配置远端发布

    Orchard中默认安装是有Blog功能的.下面介绍如何配置Remote Blog Publishing功能,使用Windows Live Writer客户端发布博客. 一,开启Remote Blog ...