<!DOCTYPE html>
<html ng-app>
<head>
<title> New Document </title>
<script type="text/javascript" src="angular.js"></script>
</head>
<body ng-controller='CartController'>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'/>
<span>{{item.quantity}}</span>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">remove</button>
</div>
<div>总共：{{totalCart() | currency}}</div>
<script type="text/javascript">
function CartController($scope){
$scope.items=[
{title:'海尔冰箱',quantity:8,price:3.95},
{title:'长虹电视',quantity:8,price:3.95},
{title:'电饭锅',quantity:8,price:3.95}
];
$scope.remove=function(index){
$scope.items.splice(index,1);
}
$scope.totalCart=function(){
var total = 0;
for(var i=0;i<$scope.items.length;i++){
total = total + $scope.items[i].price*$scope.items[i].quantity
}
return total;
};
}
</script>
</body>
</html>
分享到：
相关推荐
在本文中，我们将深入探讨如何使用AngularJS实现购物车中的商品数量加减计算功能。AngularJS，一个由Google维护的JavaScript框架，以其双向数据绑定、模块化和丰富的指令集而闻名，非常适合构建交互性强的Web应用...
SpringMVC+angularjs 购物车页面
在本文中，我们将深入探讨如何使用AngularJS进行购物车商品数量的加减计算以及相关功能的实现。AngularJS是一款强大的JavaScript框架，它提供数据绑定、依赖注入和模块化等特性，使得开发动态Web应用变得更加简单。 ...
这个Demo主要展示了如何创建一个类似外卖应用中的购物车功能，包括添加商品、修改数量、删除商品以及计算总价等核心操作。下面将详细介绍该Demo涉及的知识点。 1. **数据结构与适配器模式**： - 购物车中的商品...
KarmYoga, 准备使用所有功能的AngularJS购物车 KarmYoga.Com免费电子商务咨询和电子商务开发平台。 KarmYoga.Com - 免费电子商务咨询和电子商务开发平台。 我专注于让人们从他们的日常生活中获得更多的收益。 我们...
在本项目"HTML+CSS+JS手机端购物车demo"中，我们将探讨如何利用前端技术栈，特别是HTML、CSS和JavaScript（以及Vue.js框架），来实现一个手机端的购物车功能。这个示例是一个获取JSON数据并使用Vue进行数据绑定和...
下面将详细阐述如何使用Objective-C（OC）语言来构建一个购物车Demo。 首先，我们需要理解购物车的基本逻辑。购物车通常包含商品列表，每个商品都有名称、价格、数量等属性。用户可以添加商品到购物车，修改商品...
在Android开发中，"Android仿淘宝购物车demo"是一个典型的项目实例，用于模拟淘宝购物车的功能，它主要涉及到了ExpandableListView的使用以及购物车中常见的全选、多选、单选、编辑和删除等操作。这个项目对于理解和...
一个用vue.js做的购物车小demo，可根据自身需要进行增加删除修改等
这个"iOS购物车demo"提供了一个实现此类功能的实例，旨在帮助开发者理解和构建自己的购物车系统。下面将详细介绍这个demo涉及的知识点，以及如何利用它来学习和实践。 1. **UIKit框架**：iOS购物车demo的基础是...
本项目"购物车效果demo"旨在提供一个基础的实现方案，帮助开发者理解和掌握相关技术。 1. **购物车UI设计** - 使用`RecyclerView`展示购物车中的商品列表，`RecyclerView`是Android中用于高效显示大量数据的组件，...
卡特化 基于localstorage的angularjs购物车系统
在本实例中，我们将重点介绍如何利用AngularJS来制作一个简单的购物车功能，包括计算商品价格和删除购物车中的商品。 为了实现购物车功能，我们将使用AngularJS的数据绑定、指令、控制器和作用域。数据绑定允许我们...
这个"ios-购物车demo.zip"提供的应该是一个实现这些功能的基础示例。接下来，我们将深入探讨购物车功能的关键知识点。 1. **商品模型设计**：在iOS应用中，每个商品都是一个对象，通常包含商品ID、名称、价格、图片...
仿京东购物车demo，详情请看Git上的代码，会不断完善。
这个"ios-购物车Demo.zip"包含了一个简单的购物车实现示例，旨在帮助开发者理解如何在iOS应用中构建类似的功能。以下将详细介绍该Demo中涉及的关键知识点。 首先，购物车功能的基础是数据结构的设计。在这个Demo中...
此代码主要是区别采用代理传值，根据不同的用户选择不同的情况来进行相应的操作；作者也是个菜鸟，希望各位码友提供好的建议，谢谢！！！
JS购物车Demo展示了如何利用JavaScript来处理用户选择的商品、数量、价格等信息，以及如何实现商品的添加、删除、更新和结算功能。这个案例涉及到的主要知识点包括： 1. **DOM操作**：JavaScript通过Document ...
本Demo "ios-加入购物车，批发商城加入购物车，多选加入购物车Demo.zip" 提供了一个实现这一功能的实例，主要涉及以下关键知识点： 1. **多选机制**：批发商城中的“多选加入购物车”功能，允许用户一次选择多个...