<!DOCTYPE html>

<html lang="en" ng-app>

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script type="text/javascript" src="js/angular-1.3.0.js"></script>

	<script>

		function shop($scope){

			$scope.items = {

				"name":"apple",

				"price":"5",

				"quantity":"5",

				"fre":"10"

			};

			$scope.sum = function (){

				return $scope.items.price * $scope.items.quantity;

			};

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

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

			});

		}

	</script>

</head>

<body ng-controller="shop">

	<div >

		<span>{{items.name}}</span><br/>

		<span>{{items.price}}</span><br/>

		<input  type="text" ng-model="items.quantity"><br/>

		<span>{{items.fre  | currency:'￥' }}</span><br/>

		<span>{{sum() + items.fre | currency:'￥'}}</span>

	</div>

</body>

</html>

Angular 学习笔记——shop的更多相关文章

  1. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  2. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  3. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  4. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  5. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  6. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  7. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  8. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  9. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

随机推荐

  1. jquery,zepto插件编写相关

    1. $.fn.pluginName = function(opt){}就是为jquery的prototype定义了函数, 这样, 任何一个jquery对象都可以使用这个成员函数, 这种写法直观明了, ...

  2. Aspose.Cells 基础用法

    最近使用Aspose.Cells做Excel,在怎么添加批注和添加内部导航链接上耗费了一些时间,最后在官网上找到相关用法,记录一下. 代码不用过多介绍,看看即可明白. 测试代码下载 Workbook ...

  3. 微信 编码要UTF8

    <%@ WebHandler Language="C#" Class="Handler" %> using System; using System ...

  4. iOS crash 崩溃问题的追踪方法

    http://www.cnblogs.com/easonoutlook/archive/2012/12/27/2835884.html iOS crash 崩溃问题的追踪方法 在调试程序的时候,总是碰 ...

  5. 《Linux命令、编辑器与shell编程》第三版 学习笔记---001

    Linux概述 1.具有内核编程接口 2.支持多用户(同时) 3.支持多任务 4.支持安全的分层文件系统 a.标准 b.链接 c.权限 5.shell(命令解释器和编程语言) a.文件名生成(通配符和 ...

  6. （wifi）wifi移植之命令行调试driver和supplicant

    前言 小弟从事android wifi framework部分开发已经有一年的时间了,虽然感觉什么都没有学习到,但是回想起刚接手android wifi时候的那份无知,其实肚子里面还是有点东西的,本着 ...

  7. mysql中数据类型的长度

    这是一篇很全面的博客的网址 http://qimo601.iteye.com/blog/1622368 下图是其中一部分截图,在mysql数据库中新建数据表时有个长度的设置

  8. MVC如何在路由器（RouteConfig）定义后缀.html

    一.配置文件web.config添加一下设置 <system.webServer> <modules runAllManagedModulesForAllRequests=" ...

  9. AC日记——[WC2013]糖果公园 cogs 1817

    [WC2013]糖果公园 思路: 带修改树上莫队(模板): 来,上代码: #include <cmath> #include <cstdio> #include <cst ...

  10. HDU 6268 Master of Subgraph （2017 CCPC 杭州 E题，树分治 + 树上背包）

    题目链接  2017 CCPC Hangzhou  Problem E 题意  给定一棵树,每个点有一个权值,现在我们可以选一些连通的点,并且把这点选出来的点的权值相加,得到一个和. 求$[1, m] ...