<!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. kali linux宿主机和虚拟机互访实现方案

    1.攻防模拟中,将DVWA安装到自己的宿主机中,在kali Linux中通过sqlmap和其他工具启动嗅探攻击,需要配置网络.虚拟机采用桥接方式,并复制Mac地址状况. 2.查看各自系统下的IP地址. ...

  2. java源代码

    //信1705-1 20173527 刘津鑫 package money; import java.io.IOException; import java.io.Serializable; impor ...

  3. es6 模板字符串

    模板字符串 提供构造字符串的语法糖,在 Prel/python 等语言中也都有类似特性. 1.反引号模板,可以换行 2.反引号模板,可以嵌套 用+``来嵌套 好处:语法更加简洁 var name=&q ...

  4. javaScript事件（九）事件类型之触摸与手势事件

    一.触摸事件 touchstart:当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. touchmove:当手指在屏幕上滑动时连续地触发.在这个世界发生期间,调用preventDefau ...

  5. mysql的下载与安装

    官网 下载 https://www.mysql.com/ 依次点击:downloads>community>mysql community server,如图所示   image.png ...

  6. JSP基础知识➣获取参数和过滤器（四）

    JSP表单提交和参数获取 JSP表单提交的两种方式:post和get,通过这两种方式提交的参数到后台,获取参数的值主要由request来处理,获取值的方式有以下几种: getParameter():  ...

  7. nginx 正则及rewrite常用规则实例

    一．正则表达式匹配,其中:* ~ 为区分大小写匹配* ~* 为不区分大小写匹配* !~和!~*分别为区分大小写不匹配及不区分大小写不匹配二．文件及目录匹配,其中:* -f和!-f用来判断是否存在文件* ...

  8. postgresql 查询某一个表中的所有字段

    select * from information_schema.columns where table_schema='public' and table_name='表名称 ';

  9. python 保存小数位，控制保存几位

    不知道怎么展示浮点数长度?? 看看例子就清楚了 a=0.2343545434564 print('%.3f'%a) #加点保留X个print('%3f'%a) #默认保留小数6个print('%03f ...

  10. Docker docker-compose安装

    一.在服务器上敲下面命令即可,将需要的版本号修改一下即可 sudo curl -L "https://github.com/docker/compose/releases/download/ ...