<!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. BJFU 1551 ——delightful world——————【暴搜】

    delightful world 时间限制(C/C++):20000MS/30000MS          运行内存限制:65536KByte总提交:33            测试通过:10 描述 ...

  2. java开发中的设计模式

    http://www.cnblogs.com/maowang1991/archive/2013/04/15/3023236.html 一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五 ...

  3. C# 获取字符串长度

    int leng = System.Text.Encoding.Default.GetBytes(attachfileId2).Length;

  4. SQL使用bcp方式导入，导出数据2

    select * from A_Account   EXEC sp_configure 'allow_updates' GO EXEC sp_configure 'allow_updates',0; ...

  5. vue发布后的一些问题

    1.发布后把config/index.js 的productionSourceMap: true,改成productionSourceMap: false webpack成功隐藏

  6. 单例模式（C++）

    #include <iostream> #include <string> using namespace std; class singleton { private: si ...

  7. WebService小例子———

    WebService学习(刚开始) ———————————————————————————————————————————————————————————————————— WebService:跨平 ...

  8. 获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

  9. 爬虫入门之Requests模块学习(四)

    1 Requests模块解析 Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用 Requests 继承了urllib2的所有特性.Requests支持HTTP连接保 ...

  10. Laravel 生成小程序图文海报最佳方案之一

    目前已经更新 2.0 版本,支持生成的海报关联Model,支持是否重新生成海报等功能,具体更新请移步 github: laravel-miniprogram-poster 微信小程序官方并未提供分享到 ...