AngularJS学习——价格计算器

利用AngularJs实现价格计算器，总价满100免运费。(熟悉$watch的使用)

代码：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>价格计算器</title><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
</head>
<body><div class="container" ng-controller="MyControl"><h2>价格计算器</h2>单价：<input type="text" class="form-control" ng-model="iphone.price">数量：<input type="text" class="form-control" ng-model="iphone.num"><hr><p>总价：{{ sum() | currency:'￥'}}</p><p>运费：{{ iphone.yf | currency:'￥'}}</p><p>合计：{{ sum() + iphone.yf | currency:'￥'}}</p></div><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script>var myAng = angular.module('myApp',[]);myAng.controller('MyControl',function($scope){$scope.iphone = {price:10,num:1,yf:10}$scope.sum = function(){return $scope.iphone.price*$scope.iphone.num}// $watch监控对象为属性时，不加$scope
            $scope.$watch('iphone.num',function(newvalue,oldvalue){console.log('新值：'+ newvalue +'；旧值：'+ oldvalue)})// $watch监控对象为方法时，加$scope
            $scope.$watch($scope.sum,function(newvalue,oldvalue){return $scope.iphone.yf = newvalue >= 100 ? 0 : 10;})})</script>
</body>
</html>

转载于:https://www.cnblogs.com/lvmylife/p/5650556.html

AngularJS学习——价格计算器相关推荐

AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用指令: ng-app 指令 ...
AngularJS学习笔记1
1.简介 angular.js 版本下载链接: https://github.com/angular/angular.js/releases AngularJS 是一个 JavaScript 框架.它 ...
开启AngularJS学习之旅
AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). AngularJS 学习起 ...
我的AngularJS学习轨迹
开始接触Anguljar可能是在2013年初,那个时候的版本1.0.*,那个时候国内主要的中文资料AngularJS学习笔记:http://zouyesheng.com/angular.html,an ...
推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块通过 AngularJS 的 angular ...
圆柱模板价格计算器V1.0版本
因很多客户需求,就做了一个初始版本的产品圆柱模板面积和价格的计算器,界面非常简单,做工粗糙,但是功能是可以运行.后期会在界面和功能上进行升级,打算出一个微信小程序版本.这个程序仅供参考. 演示地址:h ...
angularjs学习总结（资料收集）
angularjs学习总结(资料收集) 原文地址https://blog.csdn.net/weixin_33178524/article/details/79179597 1 前言前端技术的发展是 ...

AngularJS学习——价格计算器

利用AngularJs实现价格计算器，总价满100免运费。(熟悉$watch的使用)

代码：

AngularJS学习——价格计算器相关推荐

最新文章

热门文章