<!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. springMVC绑定json参数之二（2.2.1）

    二.springmvc 接收不同格式的json字符串 2.扫盲完了继续测试springmvc 接收不同格式的json字符串 1).格式一:json简单数组对象 前台两种传递方式: 方式一(需要拼接js ...

  2. shell入门-sed-2替换功能

    sed的替换功能和vim语法挺像的 把1到10行的nologin替换成login [root@wangshaojun ~]# sed '1,10s/nologin/login/g' 1.txt roo ...

  3. C语言学习笔记--enum和sizeof关键字

    1.enum关键字 C语言中enum关键字用来定义枚举类型 (1)enum 是 C 语言中的一种自定义类型(2)enum 值是可以根据需要自定义的的整型值(3)第一个定义的 enum 值默认为 0 ( ...

  4. Angular07 路由的工作流程、路由参数、子路由、利用路由加载模块、模块懒加载？？？

    1 Angular路由的工作流程 用户在浏览器输入一个URL -> Angular将获取到这个URL并将其解析成一个UrlTree实例 -> Angular会到路由配置中去寻找并激活与Ur ...

  5. 树莓派 Learning 002 装机后必要的操作 --- 10 实现本地电脑与远程桌面之间复制粘贴（传输）文件

    树莓派 装机后必要的操作 - 实现本地电脑与远程桌面之间复制粘贴(传输)文件 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 PC端系统:w ...

  6. Entity Framework Code-First（7）：Inheritance Strategy

    Inheritance Strategy in Code-First: We have seen in the Code First Conventions section that it creat ...

  7. Collectd基本使用

    基本用法 基础环境 操作系统 硬件配置 CentOS 7 Server 磁盘:40GB 内存:8GB 网卡:ens3(外网) 网络配置 # vim ifcfg-ens3 TYPE=Ethernet B ...

  8. 教大家一个看电视局免广告的方法--由UWP想到的

    将近一年(10个月)来一直在学习.NET技术,这其中包括C#.WPF.WCF和ASP.NET MVC,目前学习即将结束. 本人在学习WPF的过程中,也了解到有UWP这门技术,UWP技术目前来说主要是应 ...

  9. 如何使用ros命令行显示图片

    rosrun image_view image_view image:=[TOPIC] 注意:每次只能显示一个UI.不能在一条命令中订阅多个节点.

  10. c语言数组相关的计算

    1.数组的创建:元素类型 数组名 [常量或者常量表达式] 如:int arr1[10];注:即使是被const修饰的变量也不能作为[]中的内容,它本质上依然属于变量,只是具有常量属性2.数组的初始化: ...