<!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. ubuntu MySQL配置文件

    查看配置文件: locate my.cnf 查看配置文件路径: /记得要在配置环境变量后执行下列命令 which mysqld /usr/local/mysql/bin/mysqld --verbos ...

  2. 小学生都看得懂的C语言入门(6): 字符串

    1.字符用 char 表示 #include<stdio.h> int main() { char c; char d; c=; d='; if (c==d){ printf(" ...

  3. php 重要函数归集

    1.json_encode 与 json_decode json_encode 把数组转化成字符串 json_encode(array) json_decode 把目标字符串转成数组json_deco ...

  4. selenium+python-autoit文件上传

    前言 关于非input文件上传,点上传按钮后,这个弹出的windows的控件了,已经跳出三界之外了,不属于selenium的管辖范围(selenium不是万能的,只能操作web上元素).autoit工 ...

  5. python WebDriver如何处理右键菜单

    WebDriver如何处理右键菜单 一.背景 在学习selenium webdriver的过程中,遇到这样一个问题.ActionChains类中提供了context_click的方法,它可以用来在we ...

  6. Spring.Net 简单实例-01(IOC)

    1.话不多说看操作.新建"Windows窗体应用程序" 2:通过配置文件创建IOC容器 首先引入安装包 3:定义一个接口(更好的体现封装性,当然也可以直接使用类) 定义一个类,实现 ...

  7. nginx 监控脚本

    [root@Client_Download_Source shell]# cat start.nginx.sh #!/bin/bash while true do sleep 2 check=`net ...

  8. ElasticSearch文档及分布式文档存储

    1.什么是文档? 文档由索引(_index),类型(_type),唯一标识(_id) 组成,我们为 _index(索引) 分配相关逻辑地址分片,该索引下的数据会根据索引以及类型计算哈希来分配数据存储的 ...

  9. RPC服务超时排查思路

    RPC服务超时排查思路- 1.查看服务提供者日志相关信息进行排查- 2.查看消费者的超时时间设置是否合理- 3.查看服务提供者业务逻辑是否有DB操作,有的话看是否有慢SQL- 4.查看服务提供者业务逻 ...

  10. Win8.1 查看 “Windows 体验指数“

    啥是 Windows 体验指数 ? 引用MS的介绍: http://windows.microsoft.com/zh-cn/windows7/products/features/windows-exp ...