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 ...
随机推荐
- 前端js实现打印(导出)excel表格
产品原型: 图片.png 功能需求:点击导出考勤表格按钮,会自动下载成Excel格式 图片.png 图片.png jsp页面代码: <div class="tools"> ...
- [.NET Core 24]把project.json迁移到.csproj
链接:https://blog.jetbrains.com/dotnet/2017/04/04/rider-eap-update-csproj-based-net-core-support-migra ...
- 编程马拉松大赛试题及代码(C++实现)
前段时间牛客网举办了编程马拉松大赛,总共86道题,20天内完毕. 题目难度难中易都有.我发现这些题目,主要关注性能和思维. 非常多题目用常规方法是不能通过时间要求的.题目是来自于各大oj以及面试题.所 ...
- java基础—网络编程———建立聊天的形式
接收器和发射器的简单演示 import java.io.*; import java.net.*; public class SocketDemo { public static void main( ...
- svn: is already a working copy for a different url 解决办法
svnX svn: E155000: '/Users/mac/Desktop/SHiosProject/SVNmangerfiles/wuye' is already a working c ...
- spark accumulator累加器
java /** * accumulator可以让多个task共同操作一份变量,主要进行多个节点对一个变量进行共享性的操作,accumulator只提供了累加的功能 * 只有driver可以获取acc ...
- 大型项目linux自动化版本发布脚本(shell)之tomcat、nginx服务脚本
开发十年,就只剩下这套Java开发体系了 >>> 最近,又临近博主所负责的一个大型项目的发版了.之前有提到过,该项目涉及到30-40台服务器的发版.且项目客户规定发版需在晚上10 ...
- TensorFlow 学习(六) —— TensorFlow 与 numpy 的交互
1. 将 numpy 下的多维数组(ndarray)转化为 tensor a = np.zeros((3, 3)) ta = tf.convert_to_tensor(a) with tf.Sessi ...
- vultr的80端口?
1.查看防火墙版本号firewall-cmd --version2.查看防火墙状态firewall-cmd --state3.添加80端口的权限firewall-cmd --zone=public - ...
- dotnet core 使用 sqlite 部署到 Centos 服务器
原文:dotnet core 使用 sqlite 部署到 Centos 服务器 本文告诉大家如何创建一个 asp dotnet core 程序,这个程序使用 sqlite 保存,部署程序到 Cento ...