Simple Shopping Cart By AngularJS
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="~/Scripts/angular.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{ title: 'Paint pots', quantity: 8, price: 3.95 },
{ title: 'Polka dots', quantity: 17, price: 12.95 },
{ title: 'Pebbles', quantity: 5, price: 6.95 }
];
$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
Use module:
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="~/Scripts/angular.js"></script>
<script>
var myModule = angular.module('myApp', []);
myModule.controller('CartController', function ($scope) {
$scope.items = [
{ title: 'Paint pots', quantity: 8, price: 3.95 },
{ title: 'Polka dots', quantity: 17, price: 12.95 },
{ title: 'Pebbles', quantity: 5, price: 6.95 }
];
$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
});
</script>
</body>
Simple Shopping Cart By AngularJS的更多相关文章
- 购物车（Shopping cart） —— B2C网站核心产品设计 （二）
购物车是做什么的? 我们先来看一下现实超市中的购物车,一个带四个轱辘的铁筐子,客人推来推去,看到什么东西喜欢,就扔进去,觉得东西差不多了,就推到收银台. 那B2C网站中的购物车又是一个什么东西呢? 从 ...
- C#集合Collections购物车Shopping Cart
这篇是对象与集合操练,物件的创建,集合的一些基本功能,如添加,编辑,删除等功能. 对象,即是网店的商品物件,Insus.NET只为其添加2个属性,物件的ID的Key和名称ItemName以及2个构造函 ...
- shopping cart
#Author:Kevin_hou #定义产品列表 product_list =[ ('HUAWEI',5999), ('Watch',500), ('Nike',800), ('Toyota',20 ...
- shopping cart<代码>
i = ["iphone 6000", "bicycle 1000", "coffee 50", "python book 100 ...
- [AngularJS] Write a simple Redux store in AngularJS app
The first things we need to do is create a reducer: /** * CONSTANT * @type {string} */ export const ...
- Ajax实例-购物车
一.概述 1.当添加或删除商品时,购物车会立即更新数据 2.思路: (1)建立商品类Item.java,存有商品属性name,prince,code(商品编码)等 (2)建立商品目录类Catalog. ...
- AngularJS快速入门01-基础
记得第一次听说AngularJS这项很赞的Web的前端技术,那时还是2014年,年中时我们我的一个大牛兄弟当时去面试时,被问到了是否熟悉该技术,当时他了解和使用的技术比较多.我们询问他面试情况时,他给 ...
- angularJs案例汇总
---恢复内容开始--- 这里我会把学习过程中碰到的demo与大家分享,由浅入深,逐个分析. Eg1:入门必备 <html ng-app="todoApp"> < ...
- 《Pro AngularJS》学习小结-02
上一篇的项目只有一个单独的模板页面,加入了相应的controller,filter,使得页面上的数据能够动态的变化.现在我们开始建立并整合多个模板,加入购物车模块和结账checkout模块. 一.在页 ...
随机推荐
- 【Base64&UrlEncode】
base641.包含A-Z a-z 0-9 和加号“+”,斜杠“/” 用来作为开始的64个数字. 等号“=”用来作为后缀用途.2.2进制的.3.要比源数据多33%.4.常用于邮件.5. = 号的个数 ...
- Flex 仿Winxp左侧菜单
呆毛放出,源码暂时不能公布,一直比较喜欢winxp的左侧菜单样式,以前也用xslt实现过,但总是达不到完美,没想到FLex轻松做到了这一点,几乎和winxp一模一样.
- onclicklistener到底怎么用？
转载地址:http://blog.csdn.net/dickren123/article/details/7216975 相信很多像我一样的新手学习Android开发会遇到这个问题,通过这几天的归类和 ...
- 二模10day1解题报告
T1.阅览室(reading) 有一个0~T时间内开放的阅览室,n个读者来读书每人k本,编号和看完所需时间在输入中.其中喜欢度降序排列(不考虑数值),每个人先看喜欢的,如果没有(被人拿走了)就继续找第 ...
- 完成《Java编程入门》初稿
Java编程入门 现在的运维工程师不但要懂得集合网络.系统管理而且要和开发人员一起调试系统,社会上也需要"复合性"的运维人员,所以需要做运维的也要懂一些开发,知道软件系统接口的调试 ...
- CLRS:build_max_heap（strorage in array）
//用满二叉树存储,从n/2处开始递归向上调整(n/2后均为叶子节点,无需调整)使得根最大 //满二叉树顺序存储,左子2i,右子2i+1: #include<stdio.h>#includ ...
- PAT1030. Travel Plan
//晴神模板,dij+dfs,貌似最近几年PAT的的图论大体都这么干的,现在还在套用摸板阶段....估计把这及格图论题题搞完,dij,dfs,并查集就掌握差不多了(模板还差不多)为何bfs能自己干出来 ...
- openstack openrpc
- Delphi Form的释放和隐藏：free,hide,close
form.Free - 释放Form占用的所有资源.Free后,Form指针不能再使用,除非对Form重新赋值. form.Hide - 隐藏Form.可以调用form.Show再 ...
- VS2013连接不上TFS，TF31002记录
之前vs2013连接好好的,昨天就发现不行,类似如下错误 可能原因及解决办法: 1:C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\CONFIG 下的 Ma ...