angular初始用——简易购物车
<html>
<head>
<meta charset="utf-8">
<script src="js/angular.js"></script>
<script src="js/mult_app.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.nested {
border: 1px solid red;
margin-left: 2em;
padding: 1em;
}
</style>
</head>
<body ng-app="MyApp">
//angularjs版本的多个购物车
<div ng-controller="MyCar">
<ul ng-repeat="item in carList">
<li>名字{{item.name}} 数量 <span ng-click="minus(item.index)">-</span> {{item.num}} <span ng-click="plus(item.index)">+</span> 价格{{item.price}}
<span ng-click="remove(item.index)">删除</span>
</li>
</ul>
总价 {{totalPrice}}
</div>
</body>
</html>
var app = angular.module("MyApp", []);
var carList = [{
name: "牛奶",
price: 20,
num: 1
},{
name: "鮮花",
price: 5,
num: 1
},{
name: "水果",
price: 10,
num: 1
},{
name: "鸡蛋",
price: 2,
num: 1
}];
function wrapData(data){
for(var i =0; i< data.length; i++) {
data[i].index = i;
data[i].initPrice = data[i].price;
}
}
function store(namespace, data) {
if(arguments.length > 1) {
localStorage.setItem(namespace, JSON.stringify(data));
}else {
var obj = localStorage.getItem(namespace);
return (obj && JSON.parse(obj)) || null
}
}
function getTotalPrice(data){
var totalPrice = 0;
for(var i =0; i< data.length; i++) {
totalPrice+= data[i].num * data[i].initPrice
}
return totalPrice;
}
wrapData(carList);
app.controller("MyCar", function($scope) {
//模块作用域
$scope.carList = store('mycar') || carList;
$scope.totalPrice = getTotalPrice(carList);
$scope.$watch("carList", function(newvalue, oldvalue){
$scope.totalPrice = getTotalPrice($scope.carList);
store('mycar', $scope.carList);
}, true);
$scope.remove = function(index){
$scope.carList.splice(index, 1);
}
$scope.plus = function(index){
$scope.carList[index].num ++;
$scope.carList[index].price += $scope.carList[index].initPrice;
}
$scope.minus = function(index){
$scope.carList[index].num --;
$scope.carList[index].price -= $scope.carList[index].initPrice;
}
});
app.controller("AnotherCtrl", function($scope) {
$scope.firstUser = 'Peter';
});
angular初始用——简易购物车的更多相关文章
- Session机制二（简易购物车案例）
一:案例一(简易购物车) 1.目录结构 2.step1.jsp <%@ page language="java" contentType="text/html; c ...
- javaweb练手项目jsp+servlet简易购物车系统
简易购物车项目 这是一个用intellij IDEA做的简易的javaweb项目,开发环境使用的jdk1.8和tomcat8以及mysql数据库. 1.项目开发准备: 创建github仓库 项目框架搭 ...
- angular做的简单购物车
虽然本人也是刚刚才开始学习angular.js,并不是非常会,但是这并不能阻止我对angular的喜爱.因为它太省代码了,比如说一个比较简单的购物车,就是只有商品名称,单价,数量,小计,总计和删除功能 ...
- IONIC之简易购物车
HTML <div ng-app="app"> <div class="l-header"> <div class="l ...
- Java servlet 实现的简易购物车
首页 2.购买页 3.购物车页 1. 首页代码 发送一个post请求 <!DOCTYPE html><html lang="en"><head> ...
- [ Python -1 ] 简易购物车程序
练习: 1. 要求用户输入总资产,例如:2000 2. 显示商品列表,让用户根据序号选择商品,加入购物车 3. 购买,如果商品总额大于总资产,提示账户余额不足,否则,购买成功. goods = [{' ...
- ~~小练习：python的简易购物车~~
进击のpython 1,用户先给自己的账户充钱:比如先充3000元. 2,有如下的一个格式: goods = [{"name": "电脑", "pri ...
- HttpSession之简易购物车
创建一个简单的购物车模型,由三个 jsp 和两个 Servlet 组成: step1.jsp <%@ page language="java" contentType=&qu ...
- Newbe.Claptrap 框架入门，第一步 —— 创建项目，实现简易购物车
让我们来实现一个简单的 “电商购物车” 需求来了解一下如何使用 Newbe.Claptrap 进行开发. 业务需求 实现一个简单的 “电商购物车” 需求,这里实现几个简单的业务: 获取当前购物车中的商 ...
随机推荐
- c# new关键字的三种用法
三种用法如下: 在 C# 中,new 关键字可用作运算符.修饰符或约束. 1)new 运算符:用于创建对象和调用构造函数. 2)new 修饰符:在用作修饰符时,new 关键字可以显式隐藏从基类继承的成 ...
- 优化SQLServer数据库加快查询速度
查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3.没有创建计算列导致查询不优化. 4.内存不足 ...
- Gym 100553B Burrito King 无脑背包
题意就是你有n和m两个上限 吃一个东西会同时增加两个东西 m的值不能超过给定的m 问最后的n m值和每个东西吃了多少 贪心一下就好了 算一下性价比 从最大的开始吃 直到吃满了m n也一定是最大了 只是 ...
- jvm工具的使用
打开Java VisualVm->工具->插件 如图: 关于要填写的URL地址到 http://visualvm.java.net/pluginscenters.html 找到jdk版本 ...
- 在客户端缓存Servlet的输出
对于不经常变化的数据,在servlet中可以为其设置合理的缓存时间值,以避免浏览器频繁向服务器发送请求,提升服务器的性能. public class ServletContext7 extends H ...
- 让人头疼的CSS兼容
先说点Hack的知识(真正的高手是不用Hack的,但要成为高手必须通过Hack这一关) /* CSS属性级Hack */ color:red; /* 所有浏览器可识别*/ _color:red; /* ...
- 移动端touch事件影响click事件的相关解决方法
preventDefault()的方法,阻止事件的默认行为. 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->cl ...
- juniper防护墙接口的NAT和ROUTE模式如何选择问题
juniper防护墙一般是把trust接口部署为NAT模式,untrust接口部署为route模式.这样当来自内部的数据访问Utrust区域时,会把源地址翻译成untrust接口的地址.从而达到隐藏内 ...
- 【转载】将绿色版Tomcat服务添加到系统服务并设为开机运行
转自: http://www.cnblogs.com/lan0725/archive/2009/11/04/1873859.html 运行cmd打开控制台,进入Tomat目录/bin文件夹,输入如 ...
- 在centos中配置maven
为了服务于jenkins,准备安装maven 首先在官网下载最新版本的maven,我此时的版本为apache-maven-3.3.9-bin.tar.gz 把该文件移到到/usr/local下 进行解 ...