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模块. 一.在页 ...
随机推荐
- 中南大学第一届长沙地区程序设计邀请赛 New Sorting Algorithm
1352: New Sorting Algorithm Time Limit: 1 Sec Memory Limit: 128 MB Description We are trying to use ...
- http是什么?
http HyperText Transfer Protocol 超文本传输协议,是一个应用层通信协议. 可以用wireshark抓取.
- Objective-C的内存管理
一.Objective-C内存管理的对象 1. 值类型:比如int.float.struct等基本数据类型. 值类型会被放入栈中,在内存中占有一块连续的内存空间,遵循先进后出的原则,故不会产生碎片. ...
- com学习（五）——实现多接口
从第五回开始到第七回,咱们用 ATL 写了一个简单的 COM 组件,之所以说简单,是因为在组件中,只实现了一个自定义(custom)的接口 IFun.当然如果想偷懒的话,我们可以把 200 个函数都加 ...
- Swift学习（四）常量&变量&基础数据类型
常量和变量 常量: 使用let关键词来声明一个常量 所指向的是一个特定类型的值,如数字10或者字符”hello”,常量的值是不能够被二次修改的 编程时使用常量能够让代码看起来更加安全和简洁! let ...
- SQL函数——LENGTH()和LENGTHB()
LENGTH()函数是比较简单同时也是非常有用的一个函数,在此小记一下,加深印象以备后用! 1:先上实验的例子——我新建了一张Student表,插入了若干条测试数据,如下图所示: 2:实验LENGTH ...
- USACO Section 3.3 商店购物 Shopping Offers
题目背景 在商店中,每一种商品都有一个价格(用整数表示).例如,一朵花的价格是 2 zorkmids (z),而一个花瓶的价格是 5z .为了吸引更多的顾客,商店举行了促销活动. 题目描述 促销活动把 ...
- java学习之（垃圾回收）
程序无法精确控制java垃圾回收的时机,但依然可以强制系统进行垃圾回收--这种强制只是通知系统进行垃圾回收, 但系统是否进行垃圾回收依然不确定.大部分时候,程序强制系统垃圾回收后总会有一些效果,强制系 ...
- A new start！
从今天起,开始每天晚上拿出来半个小时到一个小时的时间来总结今天我做的那些事情,有哪些进步,有哪些不足,有哪些心得和笔记. 以前的学习都是每天学完就往脑袋后面一放,导致很多东西当时学会了,但是后面就都想 ...
- 开源项目:DolphinPlayer
Dolphin Player是一款基于FFmpeg解码视频播放器,支持大多数的音频和视频格式. 项目主页:http://code.google.com/p/dolphin-player/ 源代码Git ...