<!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. 利用map和stringstream数据流解题

    题目描述 喜闻乐见A+B.读入两个用英文表示的A和B,计算它们的和并输出. 输入 第一行输入一个字符串,表示数字A:第二行输入一个字符串表示数字B.A和B均为正整数. 输出 输出一个正整数n,表示A+ ...

  2. java.text.DateFormat 日期格式化

    一: java.text.DateFormat <%@ page language="java" contentType="text/html; charset=u ...

  3. ubuntu18.04进不了桌面

    ubuntu升级18.04进不了桌面 https://chengfeng.site/2018/05/02/ubuntu%E5%8D%87%E7%BA%A718-04%E8%B8%A9%E7%9A%84 ...

  4. 20165314 学习基础和C语言基础调查

    技能学习心得 你有什么技能比大多人(超过90%以上)更好?针对这个技能的获取你有什么成功的经验?与老师博客中的学习经验有什么共通之处? 从小我的父母就逼着我学习很多技能,比如钢琴,围棋,书法等,不过很 ...

  5. Nginx详解四：Nginx基础篇之目录和配置语法

    一.安装目录 命令:rpm -ql nginx 二.编译参数 命令:nginx -V 三.Nginx基本配置语法 修改主配置文件 当Nginx读配置文件读到include /etc/nginx/con ...

  6. php安装扩展

    php安装扩展 以前以为php的扩展要重新编译php,今天在群友的指点下知道可以像apache模块一样动态扩展,以mcrypt举例. 进入要安装的扩展的源码目录cd /root/php-5.2.6/e ...

  7. GO语言之urfave/cli命令行解析

    练习URL: https://blog.csdn.net/sd653159/article/details/83381786 相信只要部署过线上服务,都知道启动参数一定是必不可少的,当你在不同的网络. ...

  8. [POI2007]堆积木Klo

    题解: dp定义方程的时候 好像也不能都用前一个来递推..这样就不能优化了 这题看了题解才想出来... 还是很简单的啊.... 我们定义f[i]表示前i个最大收益 那么j要能从i转移就得满足a[i]- ...

  9. ios线程和GCD和队列同步异步的关系

    1.什么是进程? 进程是指在系统中正在运行的一个应用程序.比如同时打开QQ.Xcode,系统就会分别启动2个进程.截图 2.什么是线程? 1).一个进程要想执行任务,必须得有线程(每一个进程至少要有一 ...

  10. 移动端line-height问题

    ios5  上:82px;下:84px; ios6  上:82px;下:84px; ios6 plus 上:124px;下:126px; mi4w 上:118px;下:130px; vivo  上:5 ...