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= ...
随机推荐
- mybatis 学习一 总体概述
mybatis使用起来不复杂,大体上来说,就是将db连接信息,所有的sql语句信息,都放到配置文件里面,然后去读配置信息,根据db信息,创建好session工厂,然后拿到sqlsession回话之后, ...
- net.sf.json-lib maven依赖问题.
<dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...
- 杭电acm 1022题
Problem Description As the new term comes, the Ignatius Train Station is very busy nowadays. A lot o ...
- Python通过调用windows命令行处理sam文件
Python通过调用windows命令行处理sam文件 以samtools软件为例 一.下载或者索取得到windows版本的samtools软件,解压后如下: 进入文件内部,有如下几个文件: 二.将s ...
- RFC 2119中几个关键字的翻译
RFC2119定义了规范文档中,英文要求的关键动词,但中文中还没有明确的词,我的建议如下: requirement类,表示没有例外地遵守或一定出现的情况, MUST.MUST NOT.必须,必须不 S ...
- AQS(AbstractQueuedSynchronizer)介绍-01
1.概述 AQS( AbstractQueuedSynchronizer ) 是一个用于构建锁和同步器的框架,许多同步器都可以通过AQS很容易并且高效地构造出来.如: ReentrantLock 和 ...
- 【maven setting.xml】
<!--声明语句--> <?xml version="1.0" encoding="UTF-8"?> <settings xmln ...
- CEPH安装教程(中)
NTP服务配置 NTP客户端配置 # vim /etc/ntp.conf server 92.0.0.250 ### 手动同步下时间 # ntpdate -u 92.0.0.250 ### 启动服务 ...
- Codeforces Round #522 Div2C(思维)
#include<bits/stdc++.h>using namespace std;int a[200007];int b[200007][7];int ans[200007];int ...
- 洛谷P2474 [SCOI2008]天平
P2474 [SCOI2008]天平 题目背景 2008四川NOI省选 题目描述 你有n个砝码,均为1克,2克或者3克.你并不清楚每个砝码的重量,但你知道其中一些砝码重量的大小关系.你把其中两个砝码A ...