1.  <html>
  2.    <head>
  3.      <meta charset="utf-8">
  4.      <script src="js/angular.js"></script>
  5.      <script src="js/mult_app.js"></script>
  6.      <link rel="stylesheet" href="css/bootstrap.css">
  7.      <style>
  8.        .nested {
  9.          border: 1px solid red;
  10.          margin-left: 2em;
  11.          padding: 1em;
  12.        }
  13.      </style>
  14.    </head>
  15.    <body ng-app="MyApp">
  16.      //angularjs版本的多个购物车
  17.      <div ng-controller="MyCar">
  18.        <ul ng-repeat="item in carList">
  19.          <li>名字{{item.name}} 数量&nbsp;&nbsp;<span ng-click="minus(item.index)">-</span>&nbsp;&nbsp;{{item.num}}&nbsp;&nbsp;<span ng-click="plus(item.index)">+</span> 价格{{item.price}}
  20.          <span ng-click="remove(item.index)">删除</span>
  21.          </li>
  22.        </ul>
  23.        总价 {{totalPrice}}
  24.      </div>
  25.    </body>
  26.  </html>
  1.  var app = angular.module("MyApp", []);
  2.  
  3.  var carList = [{
  4.      name: "牛奶",
  5.      price: 20,
  6.      num: 1
  7.  },{
  8.      name: "鮮花",
  9.      price: 5,
  10.      num: 1
  11.  },{
  12.      name: "水果",
  13.      price: 10,
  14.      num: 1
  15.  },{
  16.      name: "鸡蛋",
  17.      price: 2,
  18.      num: 1
  19.  }];
  20.  function wrapData(data){
  21.       for(var i =0; i< data.length; i++) {
  22.          data[i].index = i;
  23.          data[i].initPrice = data[i].price;
  24.       }
  25.  }
  26.  function store(namespace, data) {
  27.      if(arguments.length > 1) {
  28.          localStorage.setItem(namespace, JSON.stringify(data));
  29.      }else {
  30.          var obj = localStorage.getItem(namespace);
  31.          return (obj && JSON.parse(obj)) || null
  32.      }
  33.  }
  34.  function getTotalPrice(data){
  35.      var totalPrice = 0;
  36.      for(var i =0; i< data.length; i++) {
  37.        totalPrice+= data[i].num * data[i].initPrice
  38.      }
  39.      return totalPrice;
  40.  }
  41.  wrapData(carList);
  42.  
  43.  app.controller("MyCar", function($scope) {
  44.    //模块作用域
  45.    $scope.carList = store('mycar') || carList;
  46.    $scope.totalPrice = getTotalPrice(carList);
  47.    $scope.$watch("carList", function(newvalue, oldvalue){
  48.        $scope.totalPrice = getTotalPrice($scope.carList);
  49.        store('mycar', $scope.carList);
  50.    }, true);
  51.    $scope.remove = function(index){
  52.           $scope.carList.splice(index, 1);
  53.    }
  54.    $scope.plus = function(index){
  55.        $scope.carList[index].num ++;
  56.        $scope.carList[index].price += $scope.carList[index].initPrice;
  57.    }
  58.    $scope.minus = function(index){
  59.        $scope.carList[index].num --;
  60.        $scope.carList[index].price -= $scope.carList[index].initPrice;
  61.    }
  62.  });
  63.  
  64.  app.controller("AnotherCtrl", function($scope) {
  65.    $scope.firstUser = 'Peter';
  66.  });

angular初始用——简易购物车的更多相关文章

  1. Session机制二（简易购物车案例）

    一:案例一(简易购物车) 1.目录结构 2.step1.jsp <%@ page language="java" contentType="text/html; c ...

  2. javaweb练手项目jsp+servlet简易购物车系统

    简易购物车项目 这是一个用intellij IDEA做的简易的javaweb项目,开发环境使用的jdk1.8和tomcat8以及mysql数据库. 1.项目开发准备: 创建github仓库 项目框架搭 ...

  3. angular做的简单购物车

    虽然本人也是刚刚才开始学习angular.js,并不是非常会,但是这并不能阻止我对angular的喜爱.因为它太省代码了,比如说一个比较简单的购物车,就是只有商品名称,单价,数量,小计,总计和删除功能 ...

  4. IONIC之简易购物车

    HTML <div ng-app="app"> <div class="l-header"> <div class="l ...

  5. Java servlet 实现的简易购物车

    首页 2.购买页 3.购物车页 1. 首页代码 发送一个post请求 <!DOCTYPE html><html lang="en"><head> ...

  6. [ Python -1 ] 简易购物车程序

    练习: 1. 要求用户输入总资产,例如:2000 2. 显示商品列表,让用户根据序号选择商品,加入购物车 3. 购买,如果商品总额大于总资产,提示账户余额不足,否则,购买成功. goods = [{' ...

  7. ~~小练习：python的简易购物车~~

    进击のpython 1,用户先给自己的账户充钱:比如先充3000元. 2,有如下的一个格式: goods = [{"name": "电脑", "pri ...

  8. HttpSession之简易购物车

    创建一个简单的购物车模型,由三个 jsp 和两个 Servlet 组成: step1.jsp <%@ page language="java" contentType=&qu ...

  9. Newbe.Claptrap 框架入门，第一步 —— 创建项目，实现简易购物车

    让我们来实现一个简单的 “电商购物车” 需求来了解一下如何使用 Newbe.Claptrap 进行开发. 业务需求 实现一个简单的 “电商购物车” 需求,这里实现几个简单的业务: 获取当前购物车中的商 ...

随机推荐

  1. A - Bi-shoe and Phi-shoe (欧拉函数打表)

    Description Bamboo Pole-vault is a massively popular sport in Xzhiland. And Master Phi-shoe is a ver ...

  2. 洛谷-烤鸡-BOSS战-入门综合练习1

    题目背景 Background 猪猪hanke得到了一只鸡  题目描述 Description 猪猪Hanke特别喜欢吃烤鸡(本是同畜牲,相煎何太急!)Hanke吃鸡很特别,为什么特别呢?因为他有10 ...

  3. Openjudge-计算概论（A）-整数奇偶排序

    描述: 输入10个整数,彼此以空格分隔重新排序以后输出(也按空格分隔),要求:1.先输出其中的奇数,并按从大到小排列:2.然后输出其中的偶数,并按从小到大排列.输入任意排序的10个整数(0-100), ...

  4. 解决time_wait过多的问题

    #netstat -n | awk ‘/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}’ LAST_ACK 14SYN_RECV 348ESTABLI ...

  5. python中的矩阵运算

    摘自:http://m.blog.csdn.net/blog/taxueguilai1992/46581861 python的numpy库提供矩阵运算的功能,因此我们在需要矩阵运算的时候,需要导入nu ...

  6. ios的虚拟键盘与fixed移动端的bug

    //$('#search')表单input;$('.search_out')浮动元素 var u = navigator.userAgent, app = navigator.appVersion;v ...

  7. yali项目的slider

    // 调用 var s41 = new slider({ target : '#slider411', titleActiveClass : 'j-active', itemActiveClass : ...

  8. 富文本ckediter

    ##<link rel='stylesheet' href='/css/index.css' /> <script type="text/javascript" ...

  9. 笨方法学python--参数，解包，变量

    1 cmd中执行 python ex11.py, ex11.py部分也是所谓的"参数". 2 from sys import argv script, first, second, ...

  10. hadoop 及hbase zookeeper 经常出现问题

    往往是以下几个 1/ 各节点时间不统一(写shell文件统一时间) 2/配置文件 /etc/hosts文件中ip地址配置错误(更新ip) 3/断网后重启机器 ip地址被修改(更新配置文件中的ip)