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= ...
随机推荐
- 【jQuery】praseFloat()方法的用法及注意事项
[jQuery]praseFloat()方法的用法及注意事项 praseFloat(): 用于解析一个字符串,并返回一个浮点数 语法: praseFloat(strin ...
- play的job执行方式
除了使用Quartz CRON trigger, 还可以写一个action来专门触发job,这样子就可以随时启动job的开始,而且还能并行其他的任务.较方便.
- shell脚本备份系统的方法
linux自动备份shell(使用全备份,增量备份策略) 在cron里设置,每周日晚12点执行(每周日全备份,其余时间增量备份)#vi backup.sh #!/bin/bash # definewe ...
- 文件格式——fasta格式
fasta格式 在生物信息学中,FASTA格式(又称为Pearson格式),是一种基于文本用于表示核苷酸序列或氨基酸序列的格式.在这种格式中碱基对或氨基酸用单个字母来编码,且允许在序列前添加序列名及注 ...
- p4555&bzoj2565 最长双回文串
传送门(洛谷) 传送门(bzoj) 题目 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为abc,逆序为cba,不相同). 输入长度为 nnn 的串 SSS ...
- 14.Nginx 文件名逻辑漏洞（CVE-2013-4547）
由于博主在渗透网站时发现现在Nginx搭建的网站是越来越多 所以对Nginx的漏洞来一个全面性的复习,本次从Nginx较早的漏洞开始分析. 2013年底,nginx再次爆出漏洞(CVE-2013-45 ...
- 1.4 DVWA亲测XSS漏洞
首先需要有配置好的DVWA环境,像下图这样 其中: XSS (DOM) : DOM型XSS漏洞 XSS (Reflected) : 反射性XSS漏洞 XSS (Stored) : 存储型XS ...
- webconfig配置详解--转
花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点.所以这里只介绍一些比较常用的节点. <? ...
- rxjs入门6之合并数据流
一 concat,merge,zip,combineLatest等合并类操作符 以上操作符在版本6中已经只存在静态方法,不能在pipe中使用. import {concat,merge,zip,com ...
- 虚拟创建失败之Dbus调试
DBus调试命令 查询连接名 ### 查询所有连接名 # dbus-send --system --print-reply --dest=org.freedesktop.DBus / org.free ...