AngularJS实现 购物车
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script type="text/javascript" src = "lib/angular.js"></script>
<style type="text/css">
.item{
height: 200px;
width:100px;
margin:5px;
border:1px solid #ccc;
float:left;
}
</style>
</head>
<body ng-app = "mapp" ng-controller = "mctrl">
<div class = "list">
<div class = "item" ng-repeat = "item in items">
<p class = "item-name"><span>商品名:</span>{{item.name}}</p>
<p class = "item-price"><span>价格:</span>{{item.price|currency:"￥"}}</p>
<input type = "button" ng-click = "buy($index)" value = "购买">
</div>
</div>
<div class = "item-car">
<p ng-repeat = "item in items">
<span>{{item.name}}    <span>
<span>{{item.price|currency:"单价"}}   </span>
<input type = "button" value = "-" ng-click = "minus($index)"/>
<input type = "text" ng-model = "varlist.itemNum[$index]">
<input type = "button" value = "+" ng-click = "add($index)"/>
<span>单件总价:{{item.price*varlist.itemNum[$index]|currency:"￥"}}</span>
</p>
<p>总价：{{varlist.total|number:2}}</p>
</div>
<script type="text/javascript">
var app = angular.module("mapp", []);
app.controller("mctrl", function($scope) {
// 数据源
$scope.items = [{
"name": "王老吉",
"price": 4
}, {
"name": "老干妈",
"price": 7.5
}, {
"name": "臭豆腐",
"price": 7.32
}, {
"name": "饼干",
"price": 22
}, ];
var len = $scope.items.length;
var arr = [];
// 循环为数组赋值
for (var i = 0; i < len; i++) {
arr[i] = 0;
}
// 检测是否变化，为了总价能够改变
$scope.$watch("varlist.itemNum", function() {
getTotal();
}, true);
// 定义变量
$scope.varlist = {
itemNum: arr,
total: 0
}
// 购物的时候操作
$scope.buy = function($index) {
$scope.varlist.itemNum[$index]++;
getTotal();
}
// -----
$scope.minus = function($index) {
if ($scope.varlist.itemNum[$index] == 0) {
return;
} else {
$scope.varlist.itemNum[$index]--;
getTotal();
}
}
// ++++
$scope.add = function($index) {
$scope.varlist.itemNum[$index]++;
getTotal();
}
// 计算总价
var getTotal = function($index) {
$scope.varlist.total = 0;
for (var j = 0; j < len; j++) {
$scope.varlist.total = $scope.varlist.total + $scope.varlist.itemNum[j] * $scope.items[j].price;
}
return $scope.varlist.total;
}
});
</script>
</body>
</html> 2015-01-19 10:54:27 linJS
AngularJS实现 购物车的更多相关文章
- angularJS商品购物车案例
<!DOCTYPE html> <html ng-app="shopping"> <head lang="en"> < ...
- angularjs实现购物车批量删除，filter模糊查询，排序
数据源 $scope.data=[ {num:1234,name:"ipad",price:3400.00,count:10}, {num:1235,name:"ipho ...
- AngularJS 实现简单购物车
使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用 ...
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证
原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证 chsakell分享了前端使用AngularJS,后端使用ASP. ...
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NE ...
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端
原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端 chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车 ...
- angularjs购物车效果
用angularjs写了一个购物车效果中. html代码: <div png-app="myAp" ng-controller="conTroll"> ...
- angularjs购物车练习
本文是一个简单的购物车练习,功能包括增加.减少某商品的数量,从而影响该商品的购买总价以及所有商品的购买总价:从购物车内移除一项商品:清空购物车. 页面效果如图: 若使用js或jQuery来实现这个页面 ...
- angularJs 购物车模型
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...
随机推荐
- SpringBoot04 SpringBoot 和 MyBatis 整合
1 所需的jar包 mysql驱动包:mysql-connector-java 数据库链接池:druid mybatis对应jar包:mybatis-spring-boot-starter 分页查询对 ...
- AngularJS(Part 10)--页面导航
页面导航 过去,一个URL代表一个页面.但是随着Ajax的兴起,情况发生的很大的变化.不同的内容可以使用同一个URL.这让浏览器中的回退.前进甚至收藏按钮都失去了作用.而AngularJS提供 ...
- 17、SAM文件格式说明（转载迷宫中的将军）
1. SAM格式说明 SAM代表Sequence Alignment/Map格式,是一种制表符分隔的文本格式,包含一个可选的头部分(header section,有人称之为“注释部分”),和一个比对部 ...
- 1、perl学习
1.字符串函数 print chomp chop length uc lc index ord #转符号为ASCII的数字 chr #转数字为ASCII的字母 substr($string,offse ...
- 17. PHP+Mysql注入防护与绕过
黑名单关键字过滤与绕过 过滤关键字and.or PHP匹配函数代码如下: preg_match('/(and|or)/i', $id) 如何Bypass,过滤注入测试语句: 1 or 1 = 1 ...
- HDU 5242 Game (贪心)
题意:给定一棵树,要求从根结点1走k次,每次都是到叶子结点结束,把走过的所有的结点权值加起来,最大是多少. 析:先把每个结点到根结点的路径之和求出来,然后按权值从大到小排序,然后每次把路径中的权值求出 ...
- NIO 之阻塞IO和非阻塞IO(转载)
阻塞模式 IO 我们已经介绍过使用 Java NIO 包组成一个简单的客户端-服务端网络通讯所需要的 ServerSocketChannel.SocketChannel 和 Buffer,我们这里整合 ...
- 【lunux-make: *** 没有规则可以创建目标“install”。 停止。问题】
[root@localhost nginx-1.8.0]# make installmake: *** 没有规则可以创建目标“install”. 停止.
- MySQL数据库修改字符集为UTF-8
需要修改my.ini [client]下添加 default_character_set = utf8 [mysql]下添加 default_character_set = utf8 [mysqld] ...
- Dapper.Common基于Dapper的开源LINQ超轻量扩展
Dapper.Common Dapper.Common是基于Dapper的LINQ实现,支持.net core,遵循Linq语法规则.链式调用.配置简单.上手快,支持Mysql,Sqlserver(目 ...