<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. (转).net Application.DoEvents()的作用

    原文地址:http://blog.csdn.net/weinierbian/article/details/6231589 Application.DoEvents()的作用:处理所有的当前在消息队列 ...

  2. php 判断数组是否为空的几种方法

    php数组为空我们可以通过很多php自带函数来实现了,比如count函数,empty函数等都可以判断数组是否为空,下面小编就为各位整理了不少的判断数组是否为空的函数,希望对各位会带来帮助. PHP判断 ...

  3. js和jQuery前台校验文件大小

    1.支持Google 不支持IE <script type="text/javascript" src="${pageContext.request.context ...

  4. C# 泛型List用法

    C# List Examples by Sam Allen - Updated September 6, 2009 Problem. You have questions about the List ...

  5. Start:at cnblogs firstDay

    C#旨在设计成为一种"简单.现代.通用",以及面向对象的程序设计语言,此种语言的实现,应提供对于以下软件工程要素的支持:强类型检查.数组维度检查.未初始化的变量引用检测.自动垃圾收 ...

  6. Flex 日期选择器控件

    在构建用户界面时,经常用到日期的输入和选择. 输入日期时,用户可以使用键盘输入,也可以在类似于日历的弹出式对话框中,通过鼠标单击所选日期. 在Flex中可以通过日期输入控件实现输入和选择日期.Flex ...

  7. Lambda表达式有何用处？如何使用？

    简单来说,编程中提到的 lambda 表达式,通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用,也就是指匿名函数.这一用法跟所谓 λ 演算(题目说明里的维基链接)的关系,有点像原子弹和质 ...

  8. #define的一些

    // 生成一个字符串 #define NSString(...) [NSString stringWithFormat:__VA_ARGS__]

  9. linux下LAMP环境搭建尝试

    最近,学习搭建了LAMP服务环境,中间遇到了很多问题,经过不断摸索总算得以解决.为了大家少走弯路,现将相关经验进行总结. linux下软件安装分为自动安装和手动安装两种,自动安装借助工具如yum等,自 ...

  10. sql server查询出的结果中添加一列序列行

    select row_number()over(order by id) as rownum ,[UserName] ,[Password] ,[Mobile] ,[Email] ,[Sex] ,[C ...