AngularJS 页面计算
<div ng-app="multipliedCaculateApp" ng-controller="multipliedCaculateController as vm">
<div class="form-group col-md-4">
<label><span class="red">*</span>单价(元):</label>
<input type="text" class="form-control width-60" ng-change="vm.getTotalPrice()"
ng-model="vm.editResource.unitPrice"/>
</div>
<div class="form-group col-md-4">
<label><span class="red">*</span>数量:</label>
<input type="text" class="form-control width-60" ng-change="vm.getTotalPrice()"
ng-model="vm.editResource.listingNumber"/>
</div>
<div class="form-group col-md-4">
<label><span class="red">*</span>总价(元):</label>
<input type="text" disabled ng-model="vm.editResource.totalPrice"
required class="form-control width-60" />
</div>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script>
var mainApp = angular.module("multipliedCaculateApp", []);
mainApp.controller('multipliedCaculateController', function ($scope) {
debugger;
var vm = this;
//editResource是个object 可以不给unitPrice和listingNumber赋默认值
vm.editResource = {
unitPrice:1,
listingNumber:2
};
vm.getTotalPrice = function () {
vm.editResource.totalPrice =vm.editResource.unitPrice * vm.editResource.listingNumber;
}
vm.getTotalPrice();
});
</script>
AngularJS 页面计算的更多相关文章
- angularJs 页面定时刷新
angularJs 页面定时刷新 页面定时刷新并在页面离开时停止自动刷新 var autoRefresh; //自动刷新 autoRefresh = $interval($scope.loadData ...
- IE下angularJS页面跳转的bug
用Angularjs做项目的过程中遇到一种情况:就是在IE浏览器下,当访问网站页面后,点击浏览器中的向左和向右(返回和前进)按钮时,需要点击两次才能正确跳转,但是在chrome及其他浏览器下该bug没 ...
- angularjs 页面缓存及动态刷新解决方案
一.准备工作 框架:angularjs ui组件库:ionic1 二.页面缓存cache 路由设置cache参数,true为缓存,false为不缓存,代码如下: angular.module('app ...
- angularjs页面传参
例如:路由配置如下: $stateProvider.state('admin.userList', { url: '/listUser?type&role', //参数必须先在 ...
- angularJs 页面筛选标签小功能
页面html: <div class="bar bar-calm bar-header"> <div class="title">新闻分 ...
- AngularJs页面跳转
同一页面之间的跳转: $state.go('station.booking'); 打开新页面的跳转方式: var url = $state.href("knowledge.questiond ...
- AngularJS 页面基本操作
一.避免预先加载angular模板语法 <style> [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, ...
- angularJs 页面{{xxx}}使用三目运算符
<td>{{::item.sex=='w'?'女':'男'}}</td>,记得引号.也可以不用::,用不用::的区别,自行百度
- AngularJS页面【uib-dropdown】控件在模态窗口(弹出窗)中无法使用问题
如果你的下拉框中有属性 dropdown-append-to-body 将它去掉,即可正常使用该插件. <div class="btn-group dropdown" uib ...
随机推荐
- 【24.34%】【codeforces 560D】Equivalent Strings
time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...
- [Angular Directive] Write a Structural Directive in Angular 2
Structural directives enable you to use an element as a template for creating additional elements. C ...
- css3-1 css3游戏介绍、css3样式和优先级
css3-1 css3游戏介绍.css3样式和优先级 一.总结 一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...
- js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr)
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- 【u011】乘法难题
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 乘法难题是一种用一行的卡片来玩的单人游戏,每张卡片上有一个正整数.在游戏者从中拿出一卡片,并且得到一个 ...
- Android SqlDelight具体解释和Demo样例
一.简单介绍 SQLDelight 和 SqlBrite 是 Square 公司推出的一个 Android 平台数据库解决方式. 在了解这个两个东西前,必须先得有Andorid的Sqlite的知识(S ...
- 工具类与工具函数 —— NextPrime
求大于某数的下一个素数: static int NextPrime (int N) { if (N % 2 == 0) ++N; int i; for (; ; N += 2){ for (i = 3 ...
- ZOJ 3209 Treasure Map DLX
用最少的矩阵覆盖n*m的地图.注意矩阵不能互相覆盖. 这里显然是一个精确覆盖,但因为矩阵拼接过程中,有公共的边,这里须要的技巧就是把矩阵的左边和以下截去一个单位. #include <stdio ...
- android应用开发 button显示两行文本
自己写了个电话拨号器的程序给男朋友玩,用来专门打我的手机号,为了把界面做的好看一点,须要用到显示两行文本的button.在网上搜罗了两种方法,记录在以下.跟大家一起分享一下,希望能帮到须要的人. 方法 ...
- web开发-MVC IoC 框架(转)
随着Web应用的商业逻辑包含逐渐复杂的公式分析计算.决策支持等,使客户机越 来越不堪重负,因此将系统的商业分离出来.单独形成一部分,这样三层结构产生了. 其中‘层’是逻辑上的划分. 三层体系结构是将整 ...