<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. (转）C#执行exe程序

    本文转自:http://www.cnblogs.com/vir56k/archive/2012/12/03/2799810.html,作者张云飞VIR 最近在操作adb做一些事情,就需要开发个wind ...

  2. gnu c语言中的?:的作用

    #include <stdio.h> #include <stdlib.h> char * test() { return "abc" ?: "f ...

  3. python 简单实现文件拷贝

    1.背景 一日加班需要写一个文件拷贝的函数. 写了几版拷贝函数,有需要的直接粘贴过去 def CopyLocaleFile1(sorfile,desfile): #第一版 sorfp=open(sor ...

  4. Hello world！让 grub2 引导自己的操作系统 Xos 内核

    按照惯例,Xos 的第一步是在屏幕上打印 Hello world!第一步是神奇的一步,如果读者对 PC 不了解,将很难得到头绪. PC 开机后,CS 和 IP 被初始化为 CS=0xFFFFh,IP= ...

  5. 【LeetCode】11. Container With Most Water

    题目: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...

  6. autoit UIA获取Listview的信息

    #include "CUIAutomation2.au3" Opt( ) Global $oUIAutomation MainFunc() Func MainFunc() ; Be ...

  7. 慕课网-安卓工程师初养成-4-3 Java条件语句之多重 if

    来源:http://www.imooc.com/code/1355 多重 if 语句,在条件 1 不满足的情况下,才会进行条件 2 的判断:当前面的条件均不成立时,才会执行 else 块内的代码.例如 ...

  8. memcached学习（5）. memcached的应用和兼容程序

    mixi在提供服务的初期阶段就使用了memcached. 随着网站访问量的急剧增加,单纯为数据库添加slave已无法满足需要,因此引入了memcached. 此外,我们也从增加可扩展性的方面进行了验证 ...

  9. JavaScript事件小结

    我们都晓得JavaScrip事件的重要性,所以下面小结一下以备后用!   序号 事件 描述 备注 onclick 鼠标点击某个对象时触发此事件 是最常用的事件之一 onchange 用户改变域的内容时 ...

  10. 递归遍历XML节点属性和属性值

    public static XmlDocument FileMergedIntoXML(string strXmlPathPublic) { string strXmlPathPublic = str ...