<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 页面计算的更多相关文章

  1. angularJs 页面定时刷新

    angularJs 页面定时刷新 页面定时刷新并在页面离开时停止自动刷新 var autoRefresh; //自动刷新 autoRefresh = $interval($scope.loadData ...

  2. IE下angularJS页面跳转的bug

    用Angularjs做项目的过程中遇到一种情况:就是在IE浏览器下,当访问网站页面后,点击浏览器中的向左和向右(返回和前进)按钮时,需要点击两次才能正确跳转,但是在chrome及其他浏览器下该bug没 ...

  3. angularjs 页面缓存及动态刷新解决方案

    一.准备工作 框架:angularjs ui组件库:ionic1 二.页面缓存cache 路由设置cache参数,true为缓存,false为不缓存,代码如下: angular.module('app ...

  4. angularjs页面传参

    例如:路由配置如下: $stateProvider.state('admin.userList', { url: '/listUser?type&role',         //参数必须先在 ...

  5. angularJs 页面筛选标签小功能

    页面html: <div class="bar bar-calm bar-header"> <div class="title">新闻分 ...

  6. AngularJs页面跳转

    同一页面之间的跳转: $state.go('station.booking'); 打开新页面的跳转方式: var url = $state.href("knowledge.questiond ...

  7. AngularJS 页面基本操作

    一.避免预先加载angular模板语法 <style> [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, ...

  8. angularJs 页面{{xxx}}使用三目运算符

    <td>{{::item.sex=='w'?'女':'男'}}</td>,记得引号.也可以不用::,用不用::的区别,自行百度

  9. AngularJS页面【uib-dropdown】控件在模态窗口(弹出窗)中无法使用问题

    如果你的下拉框中有属性 dropdown-append-to-body 将它去掉,即可正常使用该插件. <div class="btn-group dropdown" uib ...

随机推荐

  1. 【2016 Summary】为过往补课、为将来夯实

    前言 看了CSDN上非常多"我的2016"年终总结,也就不能免俗地来写一波.按着时间轴捋一捋这过去一年的经过,也算是这元旦假期总一个午后的休闲时光了.(结果没想到的是午饭前開始写的 ...

  2. Java开发报表——Grid++Report 报表设计器

    为了让数据显示的更加形象生动,报表在项目中差点儿是很常见的,可是大致能够分为两类: 一,图形:以图形的形式显示数据,比如柱状图,折线图,饼形图等等,这里有许多关于这方面的工具,比如JFreeChart ...

  3. margin隐藏最后的切割线

    <style> *{margin: 0;padding: 0;} #demo li{ border-bottom: 1px solid #ccc; } #demo ul{ margin-b ...

  4. 标准模板库(STL) map —— 初始化问题

    map 容器没有:.reverse成员: map 是关联式容器,会根据元素的键值自动排序: map 容器不是连续的线性空间: 标准 STL 使用 RB-tree 为底层机制 ⇒ 自动排序(关于键值): ...

  5. 《Kinect应用开发实战》读书笔记---干货集合

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接: http://blog.csdn.net/cartzhang/article/details/45029841 作者:ca ...

  6. Go语言版黑白棋

    1.游戏说明 2.无边框窗口实现 3.背景图.最小化.关闭窗口 4.界面其它设计 5.黑白子提示闪烁效果 6.落子 7.初始化棋子.改变角色 8.倒计时 9.吃子 10.棋子个数统计.胜负判断 11. ...

  7. POJ 3252 Round Numbers(数位dp&amp;记忆化搜索)

    题目链接:[kuangbin带你飞]专题十五 数位DP E - Round Numbers 题意 给定区间.求转化为二进制后当中0比1多或相等的数字的个数. 思路 将数字转化为二进制进行数位dp,由于 ...

  8. 【14.36%】【codeforces 614C】Peter and Snow Blower

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  9. Ubuntu 16.04安装MinGW32(在/etc/apt/sources.list里添加源)

    Ubuntu 16.04下直接使用命令安装MinGW32: sudo apt-get install mingw32   但是,会报错: Unable to locate package mingw3 ...

  10. 【27.48%】【codeforces 699D】 Fix a Tree

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...