<!DOCTYPE html>

<html lang="en" ng-app>   <!-- ng-app:初始化的指令 也可以解析局部-->

<meta charset="UTF-8">

<title>Document</title>

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

<script type="text/javascript">

function Aaa($scope){

    $scope.apple = {                     //M:Model  数据

        money : 100,

        num : 5,

        fre : 10,

    };

    $scope.sum = function(){

        return $scope.apple.money*$scope.apple.num;

    }

    $scope.$watch('sum()',function(newVal,oldVal){     //监听函数

        $scope.apple.fre = newVal>=100 ? 0:10;

    })

};

</script>

</head>

<body>

<div ng-controller="Aaa">                                            <!-- C:Controller 控制器：链接数据和视图的一个桥梁-->

    <p>单价：<input type="text" ng-model='apple.money' /></p>        <!-- 将输入框的内容和数据绑定在一起   这是MVVM数据双向绑定中的VM(视图影响数据) -->

    <p>数量：<input type="text" ng-model='apple.num' /></p>

    <p>运费：<span>{{apple.fre | currency:'￥'}}</span></p>            <!-- V:View  视图-->

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

</div>

</body>

</html>

angular.js学习笔记：实现商品价格计算实例的更多相关文章

  1. Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  2. Angular.js学习笔记（三）

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

  3. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

  4. Angular JS 学习笔记（二）

    1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...

  5. Angular JS 学习笔记（一）

    1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net ...

  6. Angular.js学习笔记 （二）

    用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.cr ...

  7. angular.js学习笔记--概念总结

    好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...

  8. Angular.JS学习笔记——1

    内容来自:http://www.runoob.com/angularjs/angularjs-intro.html AngularJS 是一个 JavaScript 框架.它是一个以 JavaScri ...

  9. Angular.js学习笔记 （一）

    - angular中最重要的概念是指令(directive)- ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的[user.name]建立绑定关系### 模块(Mo ...

随机推荐

  1. 关于Apache，Mysql，PHP之间的关系

    声明:以下为作者原创,转载请注明文章来源地址. 通过百度百科我们知道 Apache(全称Apache HTTP Server):是世界使用排名第一的Web服务器软件.可以在大多数计算机操作系统中运行, ...

  2. mysql,mybatis使用中遇到的类型转化的问题

    产生原因还没有明白,先记录一下. 使用DATEDIFF函数,计算两个日期的时间差.在mybatis中,resultType 是map.在代码中,根据map的key取值的时候. 在mysql 5.5.3 ...

  3. UVa 481 - What Goes Up

    题目大意:给你一系列数,找出它的最长(严格)递增子序列. 由于数据量较大,使用O(n2)的LIS算法会超时,要使用O(nlogn)的LIS算法,这里有详细的介绍. #include <cstdi ...

  4. CentOS 7修复MBR和GRUB

    (转载) 一.修复MBR: MBR(Master Boot Record主引导记录): 硬盘的0柱面.0磁头.1扇区称为主引导扇区.其中446Byte是bootloader,64Byte为Partit ...

  5. centos 6 下编译安装 nginx

    下载nginx源码包,可以到nginx官方的下载文件归档里 http://nginx.org/download/ 下载 下载pcre源码,并编译安装,从pcre官方下载  ftp://ftp.csx. ...

  6. UIscrollView 代理

    // // UIDemoViewController.m // 06-1UIScrollDemo // // Created by k on 14-9-4. // Copyright (c) 2014 ...

  7. AFNetWorking 之 Get/Post 请求的使用

    1. Get 与 Post 比较 GET请求:简单业务.明文发送 POST请求:上传文件,重要信息.加密信息,.大数据信息. 2. 序列化 默认是JSon格式. // 请求的序列化 manager.r ...

  8. java me 旋转的X案例

    package com.xushouwei.cn; import javax.microedition.lcdui.Command;import javax.microedition.lcdui.Co ...

  9. jQuery 的 ready 函数是如何工作的？(源码分析)

    如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数. 问题来啦,我们的页面什么时候准备好了呢? 1. onload 事件 最基本的处理方式就是页面 ...

  10. Xcode 使用技巧

    Xcode 之 设置文件生成时的模板 Xcode 之 修改 Create by Xcode 之 添加前缀 Xcode 之 alcatraz (插件管理器) Xcode 之 重构功能 Xcode 之 s ...