Angularjs实例应用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="edge" />
<meta name="viewport"content="width=device-width,initial-scale=1" />
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap/css/bootstrap.min.css" />
<style>
</style>
</head>
<body>
<div class="container"style="padding:50px">
<div data-ng-app="myApp"data-ng-controller="myCtrl">
<p>数量：<input type="number"data-ng-model="quantity" /></p>
<p>成本：<input type="number"data-ng-model="cost" /></p>
<hr />
<p>总价格：{{quantity*cost | currency}}</p>
</div>
</div>
<script src="jQuery/jquery-2.2.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("myCtrl", function ($scope) {
$scope.quantity = 10; $scope.cost = 9.8;
})
</script>
</body>
</html>
Angularjs实例应用的更多相关文章
- Flask+ Angularjs 实例： 创建博客
允许任何用户注册 允许注册的用户登录 允许登录的用户创建博客 允许在首页展示博客 允许登录的用户退 后端 Flask-RESTful - Flask 的 RESTful 扩展 Flask-SQLAlc ...
- AngularJS实例实战
学习了这么多天的AngularJS,今天想从实战的角度和大家分享一个简单的Demo--用户查询系统,以巩固之前所学知识.功能需求需要满足两点 1.查询所有用户信息,并在前端展示 2.根据id查询用户信 ...
- AngularJs 实例
1.AngularJs 表单验证: 示例 .controller('signupController', ['$scope', function($scope) { $scope.submitted ...
- Angularjs实例5
<!DOCTYPE html><html lang="zh-cn" ng-app="myApp"><head><met ...
- Angularjs实例2
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- angularjs实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- Angularjs实例4
<!DOCTYPE html><html lang="zh-cn" ng-app=""><head><meta htt ...
- Angularjs实例3
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Angularjs实例1
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- js event事件绑定的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CTPN_论文阅读总结
论文全名:Detecting Text in Natural Image with Connectionist Text Proposal Network 1.摘要 (1)本文提出新型网络CTPN,用 ...
- pycharm激活码------2017.11.之前有效
BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUczQ0xJSzZGIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...
- c# 快速修改图片颜色
public static void ChangeColour(this Bitmap bmp, byte inColourR, byte inColourG, byte inColourB, byt ...
- node.js压缩和解压缩
推荐一个极其简单.及其好用的node.js的压缩和解压缩类库 compressing 支持格式: tar.gzip.tgz.zip 以zip为例,tar,tgz和gzip与zip相同. 压缩文件: ...
- C语言的前世今生
1.计算机语言的发展 机器语言:其实就是二进制0和1,最小为00000000,最大为11111111,8位比特为1个字节(byte),1k=1024byte,1m=1024k,1g=1024m[第一代 ...
- XtraTabPage右键菜单(关闭当前页、关闭其它页、所有关闭的实现)
实现的需求: 用户习惯是一个不可忽略的东西,默认这版的dx的tab也木有右键操作,但用户习惯操作如浏览器都有右键关闭功能,故这里实现先dx的该功能 技术实现: (1)在winform的相应控件内,拖入 ...
- java消息中间件 RocketMQ Linux安装与运行
阿里巴巴宣布捐赠RocketMQ到Apache软件基金会孵化项目,最近闲下来便去部署了一个试验版本玩玩. 至于RockeMQ是什么,原理架构什么的这里就不赘述了,这里只记录安装过程. 一.系统环境 s ...
- 关于asp.net网站中web.config的配置
1.Session生命周期配置 2.连接默认错误页 实例说明:在一些网站中,当网络地址发生错误时,通常会自动跳转到一个页面,并在该页面显示错误信息,此功能也可以通过配置web.config文件配置实现 ...
- html 表格单元格的宽度和高度的设置
做网页的时候,经常会碰到表格宽度对不齐的问题.详细地看了html中表格标签table的高度和宽度设置的细节,现总结如下: 1.table中的width和height设置及其作用:table中设置的he ...