angularJS1笔记-(3)-购物车增删改查练习
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
<div class="container">
<table class="table" ng-controller="firstController" ng-show="cart.length">
<thead>
<tr>
<th>产品编号</th>
<th>产品名字</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cart">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<button type="button" ng-click="reduce(item.id)" class="btn btn-primary">-</button>
<input type="text" value="item.quantity" ng-model="item.quantity"/>
<button type="button" ng-click="add(item.id)" class="btn btn-primary">+</button>
</td>
<td>{{item.price}}</td>
<td>{{item.price*item.quantity}}</td>
<td>
<button type="button" class="btn btn-primary" ng-click="remove(item.id)">移除</button>
</td>
</tr>
<tr>
<td>
总价:
</td>
<td>
{{totalPrice()}}
</td>
<td>
总购买数量:
</td>
<td>
{{totalCount()}}
</td>
<td colspan="2">
<button type="button" class="btn btn-primary" ng-click="cart = {}">清空购物车</button>
</td>
</tr>
</tbody>
</table>
<p ng-show="!cart.length">您的购物车为空</p>
</div>
<script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>
js:
angular.module('myApp', []).controller('firstController', function ($scope) {
$scope.cart = [
{
id: 1000,
name: 'iphone7p',
quantity: 2,
price: 4999
},
{
id: 1001,
name: 'iphone4p',
quantity: 2,
price: 999
},
{
id: 1002,
name: 'iphone6p',
quantity: 6,
price: 3999
},
{
id: 1003,
name: 'iphoneSE',
quantity: 20,
price: 11999
}
];
//计算总价
$scope.totalPrice = function () {
var totalPrice = 0;
angular.forEach($scope.cart, function (item) {
totalPrice += parseInt(item.quantity) * item.price;
})
return totalPrice;
}
//计算总购买数量
$scope.totalCount = function () {
var totalCount = 0;
angular.forEach($scope.cart, function (item) {
totalCount += parseInt(item.quantity);
})
return totalCount;
}
//移除
$scope.remove = function (id) {
var index = -1;
angular.forEach($scope.cart, function (item, key) {
if (item.id == id) {
index = key;
}
})
if (index != -1) {
$scope.cart.splice(index, 1);
}
}
//找索引 因为angular的机制是通过索引来删除
var findIndex = function (id) {
var index = -1;
angular.forEach($scope.cart, function (item, key) {
if (item.id == id) {
index = key;
return;
}
});
return index;
}
//添加
$scope.add = function (id) {
var index = findIndex(id);
if (index != -1) {
++$scope.cart[index].quantity;
}
}
//删除
$scope.reduce = function (id) {
var index = findIndex(id);
if (index != -1) {
var item = $scope.cart[index];
if(item.quantity>1){
--item.quantity;
}else {
var returnKey = confirm('从购物车中删除该商品吗?')
if (returnKey) {
$scope.cart.splice(index, 1);
}
}
}
}
$scope.$watch('cart',function (newValue,oldValue) {
angular.forEach(newValue,function (item, key) {
if(item.quantity<1){
var returnKey = confirm('是否从购物车内删除该产品?');
if(returnKey){
$scope.cart.splice(key, 1);
}else{
item.quantity = oldValue[key].quantity;
}
}
})
},true);
});
最终结果:
因为angular是MVVM模式的双向绑定数据，所以当你改变其中变量的时候其他地方凡是用到了此变量地方都会跟着变。
angularJS1笔记-(3)-购物车增删改查练习的更多相关文章
- hibernate系列笔记(1)---Hibernate增删改查
Hibernate增删改查 1.首先我们要知道什么是Hibernate Hibernate是一个轻量级的ORMapping对象.主要用来实现Java和数据库表之间的映射,除此之外还提供数据查询和数据获 ...
- EF学习笔记-1 EF增删改查
首次接触Entity FrameWork,就感觉非常棒.它节省了我们以前写SQL语句的过程,同时也让我们更加的理解面向对象的编程思想.最近学习了EF的增删改查的过程,下面给大家分享使用EF对增删改查时 ...
- day5笔记 列表 list 增删改查
列表的使用 一.索引和切片 # 索引和切片,用法与字符串一样 l = [1,2,3,'af','re',4,'45'] print(l[0]) print(l[3]) print(l[-1]) # ' ...
- 【JAVAWEB学习笔记】20_增删改查
今天主要是利用三层架构操作数据库进行增删查改操作. 主要是编写代码为主. 附图: 前台和后台 商品的展示 修改商品
- HTML5+ 学习笔记3 storage.增删改查
//插入N条数据 function setItemFun( id ) { //循环插入100调数据 var dataNum = new Number(id); for ( var i=0; i< ...
- Python学习笔记-列表的增删改查
- [学习笔记] Oracle基础增删改查用法
查询 select *|列名|表达式 from 表名 where 条件 order by 列名 select t.* from STUDENT.STUINFO t where t.stuname = ...
- Mysql学习笔记（三）对表数据的增删改查。
正文内容. 这一部分是最简单的,也是最麻烦的.简单是因为其实只包括增删该插四个部分.大体上看,增加数据.删除数据.修改数据.查询数据都不麻烦啊,我们日常都是常用的.这个谁不会呢?以前在培训机构学mys ...
- MySQL数据库学习笔记（十二）----开源工具DbUtils的使用（数据库的增删改查）
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
随机推荐
- mypwd的实现——20155328
mypwd的实现 分析 pwd不带参数时,实现的是查看并打印当前所在位置的绝对路径功能. 如图: 所以实现mypwd时重点在于循环打印路径名,循环的终止条件是是到了根目录.判定是否到达根目录的标准为: ...
- WPF模拟雷达界面效果图
原文:WPF模拟雷达界面效果图 iPad塔防的防守兵的效果很炫,2个小时用WPF模拟了一个. 效果图: 关键代码: <Grid> <Grid.Background> <I ...
- 菜鸟vimer成长记——第2.0章、模式初探
首先,其他的文本编辑器只有一种模式,就是插入模式.而vim一下子颠覆了我们的世界观——有好多模式.这个是思维上的切换,很难也很重要!!! 其次,Vim 提供一个区分模式的用户界面.也就是说在不同的模式 ...
- CSS3新增特性详解（一）
注:由于CSS3的新特性较多,所以分两篇博文来说明.第一篇主要包括新的选择器.文字及块阴影.多背景图.颜色渐变.圆角等.第二篇主要细说CSS3的各种动画效果,如:旋转.移动.缩放等,还包括图标字体的应 ...
- Html.RenderPartial与Html.RenderAction的区别
Html.RenderPartial与Html.RenderAction这两个方法都是用来在界面上嵌入用户控件的. Html.RenderPartial是直接将用户控件嵌入到界面上: <%Htm ...
- Effective C++(Third Edition) Item29 为“异常安全”而努力是值得的
“异常安全”有两个条件: 1.不泄露任何资源 可以通过以对象管理资源的方式(Item13). 2.不允许数据败坏 异常安全函数提供以下三种保证之一 a.基本承诺 如果异常被抛出,程序内的任何事物都仍然 ...
- codeblocks一些学习
codeblocks下,怎样建立工程,进行多文件编译?如下是书上的两个文件. https://ask.csdn.net/questions/204326 codeblocks创建静态库并使用 http ...
- hdu1829A Bug's Life(种类并查集)
传送门 关键在于到根节点的距离,如果两个点到根节点的距离相等,那么他们性别肯定就一样(因为前面如果没有特殊情况,两个点就是一男一女的).一旦遇到性别一样的,就说明找到了可疑的 #include< ...
- 网易公开课[一万分钟]《office办公达人养成计划》
note: Shift表示移动 Ctrl表示复制 Excel: 快速选中单元格: 选中表格左上角Ctrl+A Ctrl+方向键,跳到行或列的尽头 Ctrl+Shift+方向键,选中一行或一列 Shif ...
- 布线问题 (NYOJ38)
布线问题 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 南阳理工学院要进行用电线路改造,现在校长要求设计师设计出一种布线方式,该布线方式需要满足以下条件:1.把所有 ...