简单的angular购物车商品小计

<!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购物车商品小计的更多相关文章

购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能
效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
e3mall商城总结12之购物车的实现、以及购物车小计问题、json406报错
说在前面的话 1.本节主要讲了e3mall购物车的实现方法,我搭建的项目和系统购物车有一些区别,因此这里需要说一下.系统搭建的项目在未登陆的情况下也可以通过cookie进行加入购物车,当用户要下单的时 ...
python实现简单的循环购物车小功能
python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...
用java代码写一个简单的网上购物车程序
需求:1.写一个商品类,有商品编号.商品名称.商品分类.商品单价属性.2.写一个商品条目信息类,有商品和数量两个属性,有商品总价格方法. 3.写一个购物车类,有添加商品方法.查看订单信息,删除商品,修 ...
每日学习心得：SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）
2013-8-20 1. SQL查询表的行列转换/小计/统计(with rollup,with cube,pivot解析) 在实际的项目开发中有很多项目都会有报表模块,今天就通过一个小的SQL ...
用SQL实现统计报表中的&quot&semi;小计&quot&semi;与&quot&semi;合计&quot&semi;的方法详解
本篇文章是对使用SQL实现统计报表中的"小计"与"合计"的方法进行了详细的分析介绍,需要的朋友参考下客户提出需求,针对某一列分组加上小计,合计汇总.网上找 ...
SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）
SQL查询表的行列转换/小计/统计(with rollup,with cube,pivot解析) 2013-8-20 1. SQL查询表的行列转换/小计/统计(with rollup,with ...
JXLS 2&period;4&period;0系列教程（四）——拾遗如何做页面小计
注:阅读本文前,请先阅读第四篇文章. http://www.cnblogs.com/foxlee1024/p/7619845.html 前面写了第四篇教程,发现有些东西忘了讲了,这里补回来. 忘了讲两 ...
简单的python购物车
这几天,一直在学python,跟着视频老师做了一个比较简单的python购物车,感觉不错,分享一下 products = [['Iphone8',6888],['MacPro ...

随机推荐

面向函数范式编程(Functional programming)
函数编程(简称FP)不只代指Haskell Scala等之类的语言,还表示一种编程思维,软件思考方式,也称面向函数编程. 编程的本质是组合,组合的本质是范畴Category,而范畴是函数的组合. 首先 ...
一个小玩具：NDK编译SDL的例子
NDK编译SDL 准备: 硬件一台电脑,实验在Lenovo T430上一个Android设备,实验在三星S3/A7 编译环境: Ubuntu 14.04 (ant\java等命令必须支持) 工具 ...
尚未配置为Web项目&period;指定的本地IIS URL http&colon;//localhsst/&period;&period;要打开项目，需要配置虚拟目录。是否立即创建虚拟目录解决
1.编辑.csproj文件 2.修改 UseIIS节点改为false,再次打开程序即可
页面某些特定图标的权限，比如导入导出表格，下载等等，这个权限必须在有某个页面查看的权利的基础上（细粒度）（shiro项目中来的四）
一,查找按钮权限的设置第一步:会根据用户的相关信息去查到它的角色表: SELECT * FROM SYS_USER WHERE user_id='eded77bdf35347249b2bacfa18 ...
MySQL的奇怪的删表数据文件而表照样能打开
MySQL的奇怪的删表数据文件而表照样能打开 author:headsen chen 2017-11-02 17:57:17 现象:删除一个正在运行的mysql数据库的表的数据文件:* ...
第26月第6天 selenium
1.selenium /** * @author Young * @param locator * @param values * @throws Exception */ protected voi ...
Masonry自动布局使用
Masonry是一个轻量级的布局框架,采用更好的语法封装自动布局,它有自己的布局DSL.简洁明了并具有高可读性而且同时支持 iOS 和 Max OS X. 下载 NSLayoutConstraint ...
JS Array&period;filter()方法
1.filter()接收的函数可以有多个参数.通常我们只使用第一个参数,第二参数和第三个参数表示元素的位置和数组本身: //去重 var arr = ["1", "2&q ...
3&period;说一下你了解的弹性FLEX布局&period;
页面布局一直都是web应用样式设计的重点我们传统的布局方式都是基于盒模型的利用display.position.float来布局有一定局限性比如说实现自适应垂直居中随着响应式布局的流行,CSS ...
PhoneGap - 解决用nmp无法安装PhoneGap问题！
PhoneGap从2.9.0开始,只采用node安装方式,安装命令如下: npm install -g phonegap 今天我使用此命令安装PhoneGap时候,始终无法安装,在网上搜索一下,最终解 ...