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模块. 一.在页 ...
随机推荐
- UIPickView 和 UIDatePicker
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- 通过WebHandler给图片添加水印
图片生成webhandler水印,主要把水印的信息和位置post到webhandler去处理,返回后再div上显示 前台传递水印的信息和位置: /***********提取DIV属性********* ...
- HDU1116图论
http://acm.split.hdu.edu.cn/showproblem.php?pid=1116 #include<stdio.h> #include<algorithm&g ...
- C# OpenFileDialog
OpenFileDialog 用于浏览并打开文件,在Windows Forms中使用,表现为标准的Windows对话框. 实例: 1.新建Windows Form Application 2.添加Op ...
- WIFI知识累计之802.11协议radiotap头解析方法
radiotap官方网站:http://www.radiotap.net/Radiotap 该网站详细介绍了radiotap的各个字段的长度和介绍,并包含解析代码项目地址,该文就在此网站的基础编写一些 ...
- ASP.NET5 中静态文件的各种使用方式
所谓静态文件,包含HTML文件,css文件.图片文件和js文件等,他们是服务器直接读取到客户端的一些资源,在这篇文章中,我们将解释关于ASP.NET5和静态文件的一些内容. 服务端的静态文件 默认情况 ...
- SDUT 3345 数据结构实验之二叉树六：哈夫曼编码
数据结构实验之二叉树六:哈夫曼编码 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 字符的编 ...
- Weblogic发布小问题——The root element weblogic-web-app is missing in the descriptor file
前几天发布项目遇到这样一个小错误,在此记录一下,以便加深一点印象,下次好解决类似的问题! (对应的应用服务器是WebLogic Server 版本: 10.3.6.0,应用是以文件夹的形式发在服务器的 ...
- uitableviewcell高度自适应笔记
今天看了几篇uitableviewcell高度自适应的文章,大体分为两种方式. 第一种方式,cell里面有label,在cellforrow绘制的时候计算Label的可能高度,并且在此时重新计算cel ...
- call函数心得
今天深深受项目组一老大哥深深的鄙视了一把,在用call的时候,因不理解导致函数之间无法正常调用 function A(){ B.call(XXX,a,b,c); }; function B(a,b,c ...