AngularJS 购物车实例

html 页面

<!DOCTYPE html>
<html ng-app>
<head>
	<title>Angular.js</title>
	<script type="text/javascript" src="angular-1.3.0.js"> </script>
	<script type="text/javascript" src="test.js"></script>
</head>
<body ng-controller="CartController">

<div ng-repeat="item in items">
<h3>your order</h3>
<span>{{item.title}}</span>
<input type="text" ng-model="item.quantity">
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">remove</button>
</div>
</body>
</html>

js页面

function CartController($scope){
	$scope.items = [
		{title:"paint posts", quantity:"8", price:"7.8"},
		{title:"paint posts", quantity:"8", price:"7.8"},
		{title:"paint posts", quantity:"8", price:"7.8"}
	];

	$scope.remove = function(index){
		$scope.items.splice(index,1);
	}
}	
时间: 2024-10-09 16:48:59

AngularJS 购物车实例的相关文章

angularjs directive 实例 详解

前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的model,也可以理解成插件,只不过这种model是带html的,例如:php的分页函数. 一,angularjs directive的常用格式,以及参数说明 1,直接return phonecatDirectives = angular.module('phonecatDirectives', [])

用javascript实现的购物车实例

基于javascript实现的购物车实例: 首先是效果和功能,如下图所示,具有购物车的基本功能. 包括1.选中和全选商品:2.商品数量的增减:3.单个商品价格的计算:4.总价的计算:5.删除商品. 一.界面布局 使用的是table来进行布局,由于用js来获取tr 和 td节点的时候,可以获取带下标的元素集合,操作起来较为便利. html+css的代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4

第一种方式:cookie的优化与购物车实例

一 Cookie 的优化 1.1 一般而言,我们设置cookie是在php中设置 例如: <?php setcookie('testKey1','hello world',0,'/'); //# 当 expires = 0 时,此Cookie随浏览器关闭而失效, ?> 而在验证的时候,我们通常是: <?php if(isset($_COOKIE['testKey2'])) echo "The New COOKIE is : testKey2 = ".$_COOKIE[

Ejb in action(四)——购物车实例演示有状态会话Bean

前面.我们介绍了一个入门实例.事实上那就是无状态回话Bean的经常使用情况. 上一篇文章中.我们介绍了无状态会话Bean和有状态会话Bean的相关概念.为了加深大家对它们的理解,我们一起来实现一个有状态会话Bean的样例--模拟购物车. 这个样例很经典:一个client购物的过程中.服务端会创建一个SessionBean保存着这一client的状态.client买的东西,都会在服务端进行存储. 也就是说.自始至终,一直存在一个有状态会话Bean对象.与该client进行交互. 以下来看详细实现:

angularjs购物车练习

本文是一个简单的购物车练习,功能包括增加.减少某商品的数量,从而影响该商品的购买总价以及所有商品的购买总价:从购物车内移除一项商品:清空购物车. 页面效果如图: 若使用js或jQuery来实现这个页面,会需要绑定很多事件,如减少数量按钮事件,增加数量按钮事件,移除某项商品事件,清空购物车事件,而这些事件之中很多代码很重复,比如计算某项商品的总购买价,计算所有商品的购买总价,不胜其烦,现在有了AngularJS,则简单许多,因为数据模型双向绑定等原因. 上图页面的代码: html [html] v

Vant+小程序+购物车实例

图片实例,看是否是您所需要的喔.... 扫码小程序可看实例操作,有啥问题也可扫码加群,很希望可以帮助到你喔!           HTML部分: <view class="cart"> <view class='top' wx:if="{{isTop}}"> <view> <van-icon name="delete" class='delete' bindtap="emptyCart"

Bootstrap+AngularJS对话框实例

<script type="text/javascript" src="/assets/JS/plugins/jquery.min.js"></script> <script type="text/javascript" src="/assets/JS/plugins/jquery-migrate.min.js"></script> <script type="t

AngularJS 历经实例

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"

python学习笔记(列表、元组、购物车实例)

一.列表 列表和字典是最常用的两种数据类型 1. 需求:怎么存放班级80多人的姓名,如何实现? names = ["Zhangyang","Guyun","Xiangpeng","Xuliangchen"] print(names[0],names[2]) #取出 Zhangyang Xiangpeng print(names[2:4]) #切片,取出"Xiangpeng","Xuliangche