<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的更多相关文章

  1. 购物车（Shopping cart） —— B2C网站核心产品设计 （二）

    购物车是做什么的? 我们先来看一下现实超市中的购物车,一个带四个轱辘的铁筐子,客人推来推去,看到什么东西喜欢,就扔进去,觉得东西差不多了,就推到收银台. 那B2C网站中的购物车又是一个什么东西呢? 从 ...

  2. C#集合Collections购物车Shopping Cart

    这篇是对象与集合操练,物件的创建,集合的一些基本功能,如添加,编辑,删除等功能. 对象,即是网店的商品物件,Insus.NET只为其添加2个属性,物件的ID的Key和名称ItemName以及2个构造函 ...

  3. shopping cart

    #Author:Kevin_hou #定义产品列表 product_list =[ ('HUAWEI',5999), ('Watch',500), ('Nike',800), ('Toyota',20 ...

  4. shopping cart<代码>

    i = ["iphone 6000", "bicycle 1000", "coffee 50", "python book 100 ...

  5. [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 ...

  6. Ajax实例-购物车

    一.概述 1.当添加或删除商品时,购物车会立即更新数据 2.思路: (1)建立商品类Item.java,存有商品属性name,prince,code(商品编码)等 (2)建立商品目录类Catalog. ...

  7. AngularJS快速入门01-基础

    记得第一次听说AngularJS这项很赞的Web的前端技术,那时还是2014年,年中时我们我的一个大牛兄弟当时去面试时,被问到了是否熟悉该技术,当时他了解和使用的技术比较多.我们询问他面试情况时,他给 ...

  8. angularJs案例汇总

    ---恢复内容开始--- 这里我会把学习过程中碰到的demo与大家分享,由浅入深,逐个分析. Eg1:入门必备 <html ng-app="todoApp"> < ...

  9. 《Pro AngularJS》学习小结-02

    上一篇的项目只有一个单独的模板页面,加入了相应的controller,filter,使得页面上的数据能够动态的变化.现在我们开始建立并整合多个模板,加入购物车模块和结账checkout模块. 一.在页 ...

随机推荐

  1. Oracle corrupt block（坏块） 详解

    转自:http://blog.csdn.net/tianlesoftware/article/details/5024966 一. 坏块说明 1.1 相关链接 在看坏块之前,先看几个相关的链接,在后面 ...

  2. 菜鸟-手把手教你把Acegi应用到实际项目中(1.1)

    相信不少朋友们对于学习Acegi的过程是比较痛苦的,而且可能最初一个例子都没能真正运行起来.即使能运行起来,对于里面那么多的配置,更搞不清楚为什么要那么配,多配一个和少配一个究竟有什么区别? 最终头都 ...

  3. 项目积累——POPUP

    父页面: <td nowrap> 合同名称: </td> <td colspan="2" nowrap> <param:popup cli ...

  4. XAML学习笔记

         XAML是用于实例化.NET对象的标记语言,主要用于构造WPF界面.不同于WPF之前的Windows编程技术(WinForm,MFC及win32sdk),在WPF之中界面主要是在XAML中添 ...

  5. Grunt 之 使用 JavaScript 语法检查工具 jshint

    前端开发环境准备好了,我们准备开始进行开发. 前端开发的主力语言是 JavaScript,这是一种脚本语言,没有编译器,也就没有了编译器带给我们的语法检查,怎样保证代码的质量呢?jshint 是一个强 ...

  6. JAVA中求解对象所占字节大小

    该类为cache4j缓存框架中的工具类方法,该方法实现了两个接口 接口1:计算对象在内存中所占字节数 接口2:复制对象,实现深度克隆效果,实现原理为先序列化对象,然后在反序列化对象:返回一个新的对象, ...

  7. 实现web页面按比例缩放

    对于web的掌握限于可以看懂别人的代码,并在框架中作相应修改或增加. 今天把另一个项目中的网页源代码粘过来做一个页面,结果问题百出. 首先,同样的代码,放在自己的项目里,页面排版错乱,看了下,引用的w ...

  8. C++断言与静态断言

    断言是很早之前就有的东西了,只需要引入cassert头文件即可使用.往往assert被用于检查不可能发生的行为,来确保开发者在调试阶段尽早发现“不可能”事件真的发生了,如果真的发生了,那么就表示代码的 ...

  9. ArcGIS10.2最新全套下载地址

    http://www.tuicool.com/articles/VfaMfy 免责声明: 该链接来自于哥伦比亚大学或者牛津大学的网站链接, 下载 软件之前确保有正版的软件授权 ,本博客只是转载了网站链 ...

  10. Visual studio 2013 Team Foundation Server TFS2013 设置签出独占锁

    摘自: http://www.cnblogs.com/52XF/p/4239056.html 以备自查 如侵权,请告知