<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="hd" ng-controller="ctrl">
名称：<input type="text" ng-model="good.title" readonly="readonly" /><br/>
单价：<input type="text" ng-model="good.price" readonly="readonly" /><br/>
数量：<input type="text" ng-model="good.num" /><br/>
总价：<input type="text" ng-value="good.num * good.price"/>
<br/><br/><br/>
商品名称：{{goods.data.title}}<br/>
商品价格：{{goods.data.price}}<br/>
商品数量：{{goods.data.num}}<br/>
商品总价：{{goods.data.num * goods.data.price}}<br/>
<button ng-click="goods.add()" >增加</button>
<button ng-click="goods.reduce()" >减少</button>
<br/><br/><br/>
<form action="1.php" method="post">
<input type="text" ng-model="name" name="name" />
<input type="submit" value="提交"/>
</form>
</div>
<script>
var m=angular.module('hd',[]);
m.controller('ctrl',['$scope',function($scope){
$scope.name="数据提交";
$scope.good={'title':'oppo','price':300,num:2};
$scope.add=function(){
$scope.good.num=Math.min(++$scope.good.num,6);
//$scope.goods.num=6?6:++$scope.goods.num

}
$scope.reduce=function(){
$scope.good.num=Math.max(--$scope.good.num,0); //
}

//整理成对象
$scope.goods={
data:{'title':'apple','price':3000,num:0},
add:function(){
$scope.goods.data.num=Math.min(++$scope.goods.data.num,6);
},
reduce:function(){
$scope.goods.data.num=Math.max(--$scope.goods.data.num,0); //
}
};

}]);
</script>

</body>
</html>

angular笔记_2的更多相关文章

  1. angular笔记

    /** * Created by Administrator on 2016/5/3 0003. */ ng-app是告诉angularjs编译器把该元素当作编译的根 //定义模块 var myApp ...

  2. Angular笔记-select

    --select-- 设置默认选中值方法: <select ng-model="url" ng-options="x.url as x.site for x in ...

  3. angular笔记_7

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. angular笔记_6

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. angular笔记_5(全选/反选)

    全选和反选 BUG:当鼠标点击其中一个选项后,在点击全选按钮,该选项失效 <!DOCTYPE html><html lang="en"><head&g ...

  6. angular笔记_4(函数)

    angular.isString();是否字符串 angular.isNumber();是否数字 angular.isArray();是否数组 angular.isDate();是否日期/时间 ang ...

  7. angular笔记_3

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. angular笔记_1

    第一个angular文件<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js&q ...

  9. Angular 笔记系列（二）数据绑定

    数据绑定这块儿没啥说的,简单两个例子带过了. Hello World: <!DOCTYPE html> <html ng-app> <head> <title ...

随机推荐

  1. 网络编程—tcp

    一.TCP简介 TCP介绍 TCP协议,传输控制协议(英语:Transmission Control Protocol,缩写为 TCP)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF ...

  2. Shiro+Redis实现tomcat集群session共享

      一.背景 当我们使用了nginx做项目集群以后,就会出现一个很严重的问题亟待解决,那就是:tomcat集群之间如何实现session共享的问题,如果这个问题不解决,就会出现登陆过后再次请求资源依旧 ...

  3. appium+python测试app使用相对坐标定位元素

    我们获取到的是绝对坐标,如果换一个屏幕分辨率不同的手机那这个坐标自然会发生变化,要实现不同手机均能实现点击同一控件自然要用到相对坐标了,具体方法如下: 1.获取当前空间的绝对坐标(x1,y1),开启指 ...

  4. Python模块之sys模块

    sys模块是与Python解释器交互的一个接口 有如下方法 sys.argv   命令行参数的一个列表,第一个参数为程序本身的路径 sys.exit(n)  退出程序,正常退出exit(0) ,异常退 ...

  5. 使用CSS选择器定位页面元素

    摘录:http://blog.csdn.net/defectfinder/article/details/51734690 CSS选择器也是一个非常好用的定位元素的方法,甚至比Xpath强大.在自动化 ...

  6. P1036 选数 题解

    题目链接https://www.luogu.org/problemnew/show/P1036 题目描述 已知 nnn 个整数 x1,x2,-,xnx_1,x_2,-,x_nx1​,x2​,-,xn​ ...

  7. SQLServer 常见高CPU利用率原因

    1.缺失索引: USE AdventureWorks2014 SET STATISTICS TIME ON; SET STATISTICS IO ON ; SELECT per.FirstName,p ...

  8. Android 实现连续两次点击或连续多次点击退出应用

    前言:  日常开发过程中,经常会遇到“连续点击两次退出应用”的需求(和“连续点击多次”的需求(如:手机从设置中进入开发者选项). 直接上代码:双击退出: private long exitTime = ...

  9. YOLO V2 代码分析

    先介绍YOLO[转]: 第一个颠覆ross的RCNN系列,提出region-free,把检测任务直接转换为回归来做,第一次做到精度可以,且实时性很好. 1. 直接将原图划分为SxS个grid cell ...

  10. Spring MVC基础知识整理➣拦截器和自定义注解

    概述 Spring MVC中通过注解来对方法或者类进行动态的说明或者标注,类似于配置标识文件的属性信息.当标注的类或者方式被使用时候,通过提取注解信息来达到对类的动态处理.在 MVC中,我们常用的注解 ...