<!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. WIN7 启动屏幕键盘

    点击“开始”或按快捷键“WIN”,输入“osk”后,按“回车键”确定,就可以启动屏幕键盘. 屏幕键盘 另一种方法是进入“控制面板”: 再进入“轻松访问中心”: 选择“启动屏幕键盘”,这样也可以启动屏幕 ...

  2. centos--git搭建之Gogs安装

    1.下载git yum intall -y git 2. 创建git用户(必须新创建git用户, 用root用户会导致无法下载) #创建git用户 sudo adduser git #给git用户设置 ...

  3. Ubuntu16.04安装vim8

    Ubuntu16.04安装vim8 在Ubuntu16.04下编译安装vim8,并配置vim-plug插件管理器,以及安装YouCompleteMe等插件. 安装依赖 sudo apt-get ins ...

  4. 免费API接口

    网址:https://code.juhe.cn/ http://apistore.baidu.com/ http://blog.csdn.net/cc20032706/article/details/ ...

  5. dubbo支持哪些通信协议和序列化协议

    dubbo支持的通信协议 dubbo协议 dubbo://192.168.0.1:20188 默认就是走dubbo协议的,单一长连接,NIO异步通信,基于hessian作为序列化协议 适用的场景就是: ...

  6. 为什么在球坐标系中，sinTheta2=std::max(T(0), 1 - cosTheta(w) * cosTheta(w));

    球坐标系中,计算sin2θ时,采用的是如下公式,感觉不理解为什么要搞一个max函数,直接1 - cosTheta(w) * cosTheta(w)不行吗,另外,即使要用max,max的第一个参数应该是 ...

  7. some advice in work

    给研究生的建议 文档抄袭自:北航大佬 Fei-Fei Li:De-Mystifying Good Research and Good Papers (repost) 如何提升你的能力?给年轻程序员的几 ...

  8. CentOS7安装MySQL并设置远程登录

    在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉MariaDB. 1 下载并安装MySQL官方的 Yum Re ...

  9. A - Points and Segments CodeForces - 429E

    题解: 方法非常巧妙的一道题 首先考虑要求全部为0怎么做 发现是个欧拉回路的问题(很巧妙) 直接dfs一遍就可以了 而这道题 要求是-1,1,0 我们可以先离散化 完了之后判断每个点被奇数还是偶数条边 ...

  10. Python_datetime模块

    datetime模块重新封装了time模块,提供更多的接口,提供的类有: date,表示日期的类 time,表示时间的类 datetime,表示日期和时间的类 timedelta,表示时间间隔,即两个 ...