<!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}}&nbsp&nbsp&nbsp&nbsp<span>

				<span>{{item.price|currency:"单价"}}&nbsp&nbsp&nbsp</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实现 购物车的更多相关文章

  1. angularJS商品购物车案例

    <!DOCTYPE html> <html ng-app="shopping"> <head lang="en"> < ...

  2. angularjs实现购物车批量删除，filter模糊查询，排序

    数据源 $scope.data=[ {num:1234,name:"ipad",price:3400.00,count:10}, {num:1235,name:"ipho ...

  3. AngularJS 实现简单购物车

    使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用 ...

  4. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证 chsakell分享了前端使用AngularJS,后端使用ASP. ...

  5. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NE ...

  6. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端 chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车 ...

  7. angularjs购物车效果

    用angularjs写了一个购物车效果中. html代码: <div png-app="myAp" ng-controller="conTroll"> ...

  8. angularjs购物车练习

    本文是一个简单的购物车练习,功能包括增加.减少某商品的数量,从而影响该商品的购买总价以及所有商品的购买总价:从购物车内移除一项商品:清空购物车. 页面效果如图: 若使用js或jQuery来实现这个页面 ...

  9. angularJs 购物车模型

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

随机推荐

  1. python 基础 列表 字符串转换

    1. 字符串转列表 str1 = "hi hello world" print(str1.split(" "))输出:['hi', 'hello', 'worl ...

  2. 学习Web前端的好网站推荐

    说明:将其他技术技术网址也搜藏到下面,与君共同进步 1.Jquery专题 http://kb.cnblogs.com/zt/jquery/ 2.Entity Framwork专题 http://kb. ...

  3. T-SQL操作XML 数据类型方法 "modify" 的参数 1 必须是字符串文字。

    ----删除关键字的同时也清理AP表中所有关联这个ID的数据 create trigger Trg_UpdateAppWordOnDelKeyWord on [dbo].[tbl_KeyWord] f ...

  4. centos6.5安装zookeeper教程(三)

    阅读前建议先阅读: http://www.cnblogs.com/duenboa/articles/6665159.html   1. 下载安装文件zookeeper-3.4.6.tar.gz 镜像地 ...

  5. android activity生命周期的一张经典图片

    图片来自http://blog.csdn.net/android_tutor/article/details/5772285 onpause只有弹出的窗体是Activity的时候才会触发,并非是通过焦 ...

  6. layui table中使用checkbox

    第一步: 1. <div class="layui-form"> <table class="layui-hide" lay-filter=& ...

  7. Struts2学习第五课 通过和ServletAPI耦合的方式获取WEB资源

    与Servlet耦合的访问方式 直接访问Servlet API将使Action与环境Servlet环境耦合在一起,测试时需要有Servlet容器,不便对Action的单元测试. 直接获取HttpSer ...

  8. Sharepoint2013商务智能学习笔记之简单概述(一)

    SharePoint 2013 中的商业智能 (BI) 提供集 Microsoft Office 应用程序和其他 Microsoft 技术于一体的全面的 BI 工具.这些 BI 工具有:Excel 2 ...

  9. IPMITOOL 配置BMC用户设置

    IPMITOOL 配置BMC用户设置 本文档共介绍5条ipmi设置user的命令,这些命令需要使用root权限才能使用,其中- H为需要操作的BMC ip,-I lanplus为使用rmcp+协议发送 ...

  10. CODING 告诉你硅谷的研发项目管理之道（3）

    前言: 本文为 CODING 教你一步步从一个程序员变身成管理者系列文章的第三篇,文章内容来自 Unity 的一位研发总监,详细叙述了他的管理风格和处事态度,同时列举了很多扩展阅读材料来帮助读者更全面 ...