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模块. 一.在页 ...
随机推荐
- 在开发板Linux上挂载"驱动"挂载不成功,出现提示server 172.27.52.100 not responding, still trying
1.在开发板具体操作步骤如下: 1.1 :设置IP ifconfig eth0 172.27.52.200 1.2 :ping通 虚拟机Linux 主机Linux ping XXX.XXX.X ...
- php 分析Session无效的原因
Session在开发中是非常重要的一个数据存储变量了,它可以实现不同页面之间的传值了,下面我们来为各位介绍在使用Session时碰到过期无效的一些问题吧． PHP开发过程中,可能有朋友经常会遇到Ses ...
- JQuery基础教程：事件（下）
事件传播 为了说明不可单击的页面元素处理单击事件的能力,例如样式转换器中包含按钮的div元素或者兄弟元素h3,我们来实现一个鼠标指针进入元素和离开元素时的效果,首先需要添加一种翻转状态,表明 ...
- OC基础(14)
Xcode设置 内存管理原则 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 ...
- JavaScript对象的创建之使用json格式定义
json: javascript simple object notation. json就是js的对象,但是它省去了xml中的标签,而是通过{}来完成对象的说明. 定义对象 var person = ...
- Visual 中控制台程序如何使用MFC类库
unresolved external symbol __beginthreadex错误的解决Win32 Consle Application使用MFC的一些类如CString时编译时相信会很经常遇到 ...
- 用C#编写游戏脚本
大学宿舍玩游戏的时候,为了简化重复的键鼠动作,有学习过按键精灵和TC脚本开发工具,并做了一些小脚本,基本达到了当时的需求.不知不觉,已经毕业了3年了,无聊之余又玩起了游戏,对于一些无趣的重复行为,于是 ...
- PMP-产品范围与项目范围区别
如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 1.产品范围--某项产品.服务或成果所具有的特性和功能. 2.项目范围--为交付具有 ...
- 在代码中调用 mvc 4 api
mvc 4 api 的调用有很多种,最常见也最简单的一种是 用 ajax 的方式在前端界面中调用, 如果是在后台代码中调用 ,是要复杂一些,以下是 以 post 的方式调用 api 的封装好的方法: ...
- 华为OJ平台——输出最小的k个数
输入n个整数,输出其中最小的k个. 详细描述: 接口说明 原型: bool GetMinK(unsignedint uiInputNum, int *pInputArray, unsignedint ...