<!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. 5、python第一天作业

    作业一:编写登陆接口 1.输入用户名密码 2.认证成功后显示欢迎信息 3.输错三次后锁定 分析: 1.流程控制图 2.编写思路 以r+(读写模式)打开文件,读取文件内容字符串,再写入文件,以字符串的长 ...

  2. 容器--TreeMap

    一.概述 在Map的实现中,除了我们最常见的KEY值无序的HashMap之外,还有KEY有序的Map,比较常用的有两类,一类是按KEY值的大小有序的Map,这方面的代表是TreeMap,另外一种就保持 ...

  3. PHP运算符

    运算符 PHP运算符可以根据操作数的个数分为一元运算符.二元运算符.三元运算符.一元运算符例如!(取反运算符)或++(加一运算符),PHP支持的大多数运算符都是这种二元运算符,例如+.-.*./等算数 ...

  4. 全文检索学习历程目录结构(Lucene、ElasticSearch)

    1.目录 (1) Apache Lucene(全文检索引擎)—创建索引:http://www.cnblogs.com/hanyinglong/p/5387816.html (2) Apache Luc ...

  5. javascript 实现一个回文数字

    写一个方法,让"1234"变成回文数字“1234321”,就是顺着读和倒着读都是一样的:注:不让用reverse()方法: function palindrome(str){ va ...

  6. Android开发学习——开发调试工具-DDMS应用，ADB进程,Logcat

    DDMS --  Dalvik debug monitor service    调试监控服务 对模拟器进行相关配置. ADB进程   Android debug bridge  建立eclipse和 ...

  7. 基本bash命令

    bash手册 输入man命令可以访问存储在linux系统上的手册页面.  如果不记得命令名,可以使用关键字搜索手册.语法是man -k 关键字.  手册被分为了不同的内容区域.man工具提供的是命 ...

  8. IOS开发之Bug--遇到一个类型不确定的bug

    下面的问题不大,是我在开发中遇到的问题: 然后我就google搜一下这个报错 . 下面就解决了:

  9. [C#6] 7-索引初始化器

    0. 目录 C#6 新增特性目录 1. 老版本的代码 private static void Main() { var dictionary = new Dictionary<int, stri ...

  10. jQuery对表单的操作

    表单应用 一个表单有3个基本组成部分: 表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法 表单域:包含文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上 ...