<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. X230上安装Yosemite/Win7-黑苹果之路

    以前曾经在X230上安装了mavericks,但因为无线网卡问题最终作罢,现在换了SSD(128G).AR9285网卡,又冲刺了一把OSX,折腾了好几天,终于成了.特做记录如下: 首先,硬盘分区问题, ...

  2. I/B/P SP/SI

    H264中I.B.P帧 I帧:只作为参考帧,采用帧内预测 B帧:以其前面的I帧或P帧和后面的P帧作为参考帧 P帧:只能以前面的I帧或P帧作为参考帧 H264中的SP SI SP和SI是H264中引入的 ...

  3. (转)Struts2返回JSON对象的方法总结

    转自:http://kingxss.iteye.com/blog/1622455 如果是作为客户端的HTTP+JSON接口工程,没有JSP等view视图的情况下,使用Jersery框架开发绝对是第一选 ...

  4. C#将C++动态库的回调函数封装成事件

    关于C#调用C++动态库的文章很多,调用动态库中回调函数的方法也不在少数.但大多数调用回调函数的方法依然保留了C++的语法特点. 比如有一段C++的回调函数代码,为了表达它的意思,我把注释也粘贴了进来 ...

  5. sublime Text及package control的安装

    1.下载并安装sublime Text2http://www.baidu.com/s?wd=sublime&rsv_spt=1&issp=1&f=8&rsv_bp=0& ...

  6. mybatis-generator 代码自动生成工具

    今天来介绍下怎么用mybatis-gennerator插件自动生成mybatis所需要的dao.bean.mapper xml文件,这样我们可以节省一部分精力,把精力放在业务逻辑上. 之前看过很多文章 ...

  7. 学习记录 java 值类型和引用类型的知识

    1. Java中值类型和引用类型的不同? [定义] 引用类型表示你操作的数据是同一个,也就是说当你传一个参数给另一个方法时,你在另一个方法中改变这个变量的值, 那么调用这个方法是传入的变量的值也将改变 ...

  8. android Camera使用(一)

    现在的App不可避免的要使用到手机的相机功能 首先我们先来介绍下最简单的一个实现方式,启动系统自带的Activity 上代码: public void openCamera() { Intent i= ...

  9. ios如何获取位置权限

    获取当前位置需要改plist文件  在plist文件加入   NSLocationWhenInUseUsageDescription  字段 /** 初始化一个管理器对象 */ locationMan ...

  10. SSH环境搭建步骤解析

    一.建立Java web project:AngelSSH 二.引入jar包,必要清单如下 2.1,Struts2 commons-fileupload  文件上传组件 commons-io   io ...