<!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. Jersey统一异常处理

    众所周知,java服务提供者提供给服务请求者应该是特定格式的数据,而不能出现异常栈类似信息,那么jersey中,如何添加统一的异常处理呢? 针对jersey启动如果是实现了ResourceConfig ...

  2. 《Python编程从入门到实践》_第八章_函数

    一个简单的函数 先看一个简单的函数 def say_hello(): '''打印hello''' print("Hello!") say_hello() #运行结果 Hello! ...

  3. 从数组去重这个函数来体验es6的高效率

    前几天碰到一个题目,要求是这样的. 题目描述 为 Array 对象添加一个去除重复项的方法 示例1 输入 [false, true, undefined, null, NaN, 0, 1, {}, { ...

  4. [转]JS跨域解决方式 window.name

    本文转自:http://www.cnblogs.com/lichuntian/p/4909465.html window.name 传输技术,原本是 Thomas Frank 用于解决 cookie ...

  5. 程序员心灵鸡汤桌面壁纸1080p 欢迎大家下载，HTML，PHP，node，css，前端

    上段时间在读书的时候看见了一句话:一张地图,不论比例多么精确,它永远不可能带着主人在地面上移动半步, 作为爱思考,爱学习的程序员 突然想到了:一份帮助文档,不论多么详细,它永远不会帮助主人敲一行代码. ...

  6. JavaScript typeof运算符和数据类型

    // js有6种数据类型:Undefined.Null.Boolean.String.Number.Object //(01)typeof console.log(typeof undefined); ...

  7. Android之侧滑导航栏

    今天学习的新内容是侧滑导航栏,我想大家肯定都比较熟悉了,因为这个效果在qq里面也有,最近一直跟室友们玩的游戏是快速让自己的头像的点赞量上千.当然我的效果跟qq是没有办法比的,因为那里面的功能是在是太强 ...

  8. java自动生成jar包工具

    jar -cfe Main.jar com.xjq.test.Main com/xjq/test/Main.class jar -cmef manifest.mf com.xjq.test.Main ...

  9. Android DiskLruCache完全解析，硬盘缓存的最佳方案 --转载

    概述 记得在很早之前,我有写过一篇文章 Android高效加载大图.多图解决方案,有效避免程序OOM,这篇文章是翻译自Android Doc的,其中防止多图OOM的核心解决思路就是使用LruCache ...

  10. [C# 网络编程系列]专题八：P2P编程

    引言: 前面的介绍专题中有朋友向我留言说介绍下关于P2P相关的内容的,首先本人对于C#网络编程也不是什么大牛,因为能力的关系,也只能把自己的一些学习过程和自己的一些学习过程中的理解和大家分享下的,下面 ...