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模块. 一.在页 ...
随机推荐
- QT5.3.2在ARM上的移植
ubuntu10.04 准备移植phonon,4.5移植失败.播放声音就出错...没办法.转移到QtMutimedia 安装交叉编译工具这里就不提了... 1.下载QT5.3.2:http://dow ...
- win8或win8.1修改注册表失败的原因
win8 and win8.1 modify the registry need compiled to be different versions according to the os bits.
- opencv 连通域需要的函数解析
OpenCV支持大量的轮廓.边缘.边界的相关函数,相应的函数有moments.HuMoments.findContours.drawContours.approxPolyDP.arcLength.bo ...
- POJ2001-Shortest Prefixes-Trie树应用
沉迷WOW又颓了两天orz,暴雪爸爸要在国服出月卡了...这是要我好好学习吗?赶紧来刷题了... OJ:http://poj.org/problem?id=2001 题目大意是求所有字符串里每一个字符 ...
- 图的最短路算法 Bellman-Ford
BF求图的最短路径的时间复杂度是O(MN),这样的时间复杂度并不比迪杰斯特拉算法好,但是BF算法支持图中存在负权的情况,但图中不能存在负圈,因为如果存在负圈,最短路是不存在的,因此BF算法的另一个重要 ...
- bzoj1216 [HNOI2003]操作系统
1216: [HNOI2003]操作系统 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 751 Solved: 419[Submit][Status ...
- php curl 提交 总结
1.post https提交 方法 function curl_post2($url='', $postdata='', $options=array()){ $ch = curl_init($url ...
- C/C++中几种操作位的方法
参考How do you set, clear and toggle a single bit in C? c/c++中对二进制位的操作包括设置某位为1.清除某位(置为0).开关某位(toggling ...
- iOS iOS7 20px 处理
- (void)viewWillAppear:(BOOL)animated { // View defaults to full size. If you want to customize the ...
- 图解Windows Server 2012 桌面图标
显示桌面图标.壁纸等 1 WIN键+R键,输入: rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0 选择你需要的图标显示到桌面去,如下图所示 ...