<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. [Linux] Search the contents of files using grep

    Learn the basic syntax for using grep to search the contents of a single file or files. It's like CM ...

  2. [Angular] Angular CLI

    Create an app with routing config: ng new mynewapp --routing If you want to generate a new module wi ...

  3. [Vue] Import component into page

    Components are one of the most powerful features of Vue. Let's take a look at how to write our first ...

  4. JS null问题

    在学习getElementById()方法的过程中出现了这样一个问题,便想记录下来. 分析问题之前,我们最好还是先来认识一下getElementById()方法.getElementById()方法, ...

  5. [GeekBand] C++ 基础知识一 ——通过引用传递数组

    本文参考 : C++ Primer (第四版)  7.2.4及 16.1.5 相关章节 GeekBand 侯捷老师,学习笔记 开发环境采用:VS2013版本 关键问题一.传递引用与传指针.传值的区别? ...

  6. 物联网学生科协第三届H-star现场编程比赛

    问题 A: 剪纸片 时间限制: 1 Sec 内存限制: 128 MB 题目描写叙述 这是一道简单的题目,假如你身边有一张纸.一把剪刀.在H-star的比赛现场,你会这么做: 1. 将这张纸剪成两片(平 ...

  7. 使用Redis做产品统计的两种模式

    http://zihua.li/2012/07/two-patterns-of-statistics-using-redis/ 产品运行过程中及时记录收集并分析统计数据对产品的持续改进有重要的指导作用 ...

  8. 小强的HTML5移动开发之路(30)—— JavaScript回顾5

    一.查找 第一种方式:依据id查找 var obj = document.getElementById(id);   //document是HTMLDocument的实例 <html> & ...

  9. 【u219】最长链

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 现给出一棵N个结点二叉树,问这棵二叉树中最长链的长度为多少,保证了1号结点为二叉树的根. [提示] 关 ...

  10. 并发新特性—Executor 框架与线程池

    兰亭风雨 · 更新于 2018-11-14 09:00:31 并发新特性-Executor 框架与线程池 Executor 框架简介 在 Java 5 之后,并发编程引入了一堆新的启动.调度和管理线程 ...