<!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实例应用的更多相关文章

  1. Flask+ Angularjs 实例： 创建博客

    允许任何用户注册 允许注册的用户登录 允许登录的用户创建博客 允许在首页展示博客 允许登录的用户退 后端 Flask-RESTful - Flask 的 RESTful 扩展 Flask-SQLAlc ...

  2. AngularJS实例实战

    学习了这么多天的AngularJS,今天想从实战的角度和大家分享一个简单的Demo--用户查询系统,以巩固之前所学知识.功能需求需要满足两点 1.查询所有用户信息,并在前端展示 2.根据id查询用户信 ...

  3. AngularJs 实例

    1.AngularJs 表单验证: 示例 .controller('signupController', ['$scope', function($scope) { $scope.submitted ...

  4. Angularjs实例5

    <!DOCTYPE html><html lang="zh-cn" ng-app="myApp"><head><met ...

  5. Angularjs实例2

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. angularjs实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  7. Angularjs实例4

    <!DOCTYPE html><html lang="zh-cn" ng-app=""><head><meta htt ...

  8. Angularjs实例3

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Angularjs实例1

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. Spring mvc框架下使用kaptcha生成验证码

    1.下载jar包并导入. kaptcha-2.3.2.jar 2.spring 配置文件 applicationContext.xml. <bean id="captchaProduc ...

  2. 关于c3p0连接池连接mysql数据库需要注意的几点

    什么是数据库连接池: 用池来管理Connection,这可以重复使用Connection.有了池,所以我们就不用自己来创建Connection,而是通过池来获取Connection对象. 当使用完Co ...

  3. C# 矩阵运算和一些基本的几何运算

    以前工作中写的,这里备个份,有可能用到 基本的矩阵运算类,测试20阶以内应该没啥问题,超过20阶不好使... /// <summary> /// 矩阵 异常 512索引 1024无解 20 ...

  4. 二维数组针对某字段排序 - array_multisort()

    /** * 针对二维数组下的某字段排序 * @param array $myarr 被排序数组 * @param string $sort_key 排序根据字段 * @param flag $sort ...

  5. Python爬虫之图片懒加载技术、selenium和PhantomJS

    一.引入 2.概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 3.回顾 验证码处理流程 一.今日详情 动态数据加载处理 1.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素 ...

  6. Angular JS例子 ng-repeat遍历输出

    首先要有Angular的插件:然后才开始遍历 :<!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. 转：什么是4D（DRG、DLG、DOM、DEM）数据？

    ps:摘抄地址http://blog.163.com/wangqing_rs/blog/static/16451519120111026102916472/  什么是4D(DRG.DLG.DOM.DE ...

  8. Android XMPP 例子(Openfire+asmack+spark) 出现登陆连接错误

    Android XMPP 例子(Openfire+asmack+spark) 运行出来没问题,但是登陆的时候出现如下错误: 出现错误: 09-17 15:24:16.388: E/AndroidRun ...

  9. iPython与notebook的基本用法

    1 Ipython 安装 pip install ipython 2 Notebooke 基本用法 启动ipython使用ipython 启动notebook 使用 ipython notebook ...

  10. mybatis3 step by step 快速上手

    作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/6895617.html 原创文章,转载请注明作者和出处,未经允许不可用于商业营利活动 官方网站 h ...