<!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. ls- 查看文件信息

    通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文件权限(包括目录.文件夹.文件权限),查看目录信息等等,ls 命令在日常的linux操作中用的很多,在此给大家介绍一下ls 命令的使 ...

  2. ps查看进程

    ps:要对进程进行监测和控制,首先必须要了解当前进程的情况,也就是需要查看当前进程,而ps命令就是最基本同时也是非常强大的进程查看命令.使用该命令可以确定有哪些进程正在运行和运行的状态.进程是否结束. ...

  3. github 分支操作

    1.查看分支 1.查看本地分支 使用git branch命令,如下: $ git branch * master *标识的是你当前所在的分支. 2.查看远程分支 命令如下: git branch -r ...

  4. Java有几种引用类型？

    有这样一类对象:当内存空间还足够,则可保留在内存中:如果内存空间在gc之后还是非常紧张,则可抛弃这些对象.很多系统的缓存功能适合这样的场景,所以jdk1.2以后 java将引用分为了强引用.软引用.弱 ...

  5. pig 入门教程（1）

    出处:http://www.codelast.com/ 本文可以让刚接触pig的人对一些基础概念有个初步的了解. 本文大概是互联网上第一篇公开发表的且涵盖大量实际例子的Apache Pig中文教程(由 ...

  6. p1919 A*B Problem升级版

    传送门 题目 给出两个n位10进制整数x和y,你需要计算x*y. 输入格式: 第一行一个正整数n. 第二行描述一个位数为n的正整数x. 第三行描述一个位数为n的正整数y. 输出格式: 输出一行,即x* ...

  7. hdu1078

    #include <stdio.h> #include <string.h> #include <algorithm> using namespace std; i ...

  8. 打开Visual Studio Code，rg.exe占用CPU过高

    打开Visual Studio Code,再打开文件-首选项-设置 搜索“followSymlinks” 将“√”给取消掉

  9. rxjs入门6之合并数据流

    一 concat,merge,zip,combineLatest等合并类操作符 以上操作符在版本6中已经只存在静态方法,不能在pipe中使用. import {concat,merge,zip,com ...

  10. java解析xml文件练习——通过应用包名获取应用图标即其他信息（基于魅族应用商店）

    1.解析包名数据文件(txt文件),并生成包名数组: package jsouphtml; import java.io.BufferedReader; import java.io.File; im ...