1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8" />
  4. <title>angular</title>
  5. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  6. <script type="text/javascript">
  7.  
  8.     //购物车中的数据;
  9.     //var boughtList = {};
  10. </script>
  11. <style>
  12. *{margin:0; padding:0; list-style:none;}
  13. #wrap{font-size:12px; line-height:20px; padding:20px;}
  14. .left li{float:left; padding:10px;}
  15. .shopcar li{float:left; padding:10px;}
  16. </style>
  17. </head>
  18. <body>
  19. <div id="wrap" ng-app="myApp" ng-controller="showItem">
  20.     <div style="overflow:hidden">
  21.         <ul class="left">
  22.             <li ng-repeat="value in items">
  23.                 <p>名称：{{value.name}}</p>
  24.                 <p>单价：{{value.price}}</p>
  25.                 <p><a href="javascript:;" ng-click="addToShopCarList()">购买</a></p>
  26.             </li>
  27.         </ul>
  28.     </div>
  29.     <hr />
  30.     <p>点击购物车内的商品可以减少购买的商品数量</p>
  31.     <div class="shopcar">
  32.         <ul style="overflow:hidden;">
  33.             <li ng-repeat="value in shopCar" ng-click="DelFromShopCarList()" style="cursor:pointer">
  34.                 <p>名称：{{value.name}}</p>
  35.                 <p>数量：{{value.amount}}</p>
  36.                 <p>单价：{{value.price}}</p>
  37.             </li>
  38.         </ul>
  39.         <p>商品总价：{{total}} 元</p>
  40.     </div>
  41. </div>
  42. <script type="text/javascript">
  43. var item = [
  44.     {id : '1',name : '蜂蜜'  ,price : 30},
  45.     {id : '5',name : '鼠标'  ,price : 39},
  46.     {id : '2',name : '黄豆酱',price : 15},
  47.     {id : '3',name : '护手霜',price : 15},
  48.     {id : '4',name : '保温杯',price : 29},
  49.     {id : '6',name : '米老头',price : 18}
  50. ];
  51. var shopCar=[];
  52. var app=angular.module("myApp",[]);
  53. app.controller("showItem",function($scope){
  54.     $scope.total=0;
  55.     $scope.items=item;
  56.     $scope.shopCar=shopCar;
  57.  
  58.     $scope.DelFromShopCarList=function(){
  59.         $scope.total-=this.value.price;
  60.         for(var i=0;i<$scope.shopCar.length;i++){
  61.             if($scope.shopCar[i].id==this.value.id){
  62.                 $scope.shopCar[i].amount-=1;
  63.                 if($scope.shopCar[i].amount===0){
  64.                     $scope.shopCar.splice(i,1)
  65.                 }
  66.             }
  67.         }
  68.     }
  69.  
  70.     $scope.addToShopCarList=function(){
  71.  
  72.         var item={
  73.                 name:this.value.name,
  74.                 price:this.value.price,
  75.                 id:this.value.id,
  76.                 amount:1,
  77.         };
  78.         var len=shopCar.length;
  79.         var inArr=true;
  80.         for(var i=0;i<len;i++){
  81.             if(shopCar[i].id===this.value.id){
  82.                 inArr=false;
  83.                 shopCar[i].amount+=1;
  84.                 break;
  85.             }
  86.         }
  87.  
  88.         if(inArr){
  89.             shopCar.push(item);
  90.         }
  91.  
  92.         $scope.total+=shopCar[i].price;
  93.     }
  94. })
  95. </script>
  96. </body>
  97. </html>

头一次试验angularjs，不知道是不是这么玩，不对的话就看个热闹吧

头一次试验angularjs的更多相关文章

  1. AngularJS安装配置与基础概要整理（上）

    以前整理的,可供参考. 安装: 1.首先要安装node.js和它的npm包管理系统.(nodejs相关待整理) 2.安装grunt .grunt是一个基于任务的Javascript工程命令行构建工具. ...

  2. 在IE7下使用angularjs(转)

    在我的环境中,主要支持的浏览器为:ie7, ie8, ie9, chrome等.在试验angularjs时,发现在ie7环境下运行有问题,于是在网上搜了一下相关的内容,说HTML标签的写法要这样: & ...

  3. Angularjs跨域

    一.首先我们要明白跨域的字面概念,读过留过印象之后,下面将会有例子进一步解释 有一篇文章<跨域的理解与实现>描述得很清楚,在这里摘录如下: 域(Domain)是Windows网络中独立运行 ...

  4. QT总结第3篇：如何在QT中添加.lib，.dll还有.h文件

    因为我在工作的过程中,使用的是第三方提供的库,但是如何将这些库添加到QT的工程中,是个问题,让我恼火了很久,怎么弄都是错的. 下面,我会对这个问题,进行叙述,希望其他人第一次遇到这种问题的时候,可以轻 ...

  5. Qt调用dll中的功能函数

    声明: 事先我已经自己动手写了一个简单的dll文件(myDLL.dll),C版接口的.并且用我前两篇有关DLL文章里面的方法,从dll中导出了导入库(.lib)文件,dll中有两个函数,原型如下:   ...

  6. 加载dll、lib库

    2.是关于如何加载dll或lib库的.可以看这篇bog   Qt调用dll中的功能函数点击打开链接 ************************************************** ...

  7. Qt调用DLL

    声明: 事先我已经自己动手写了一个简单的dll文件(myDLL.dll),C版接口的.并且用我前两篇有关DLL文章里面的方法,从dll中导出了导入库(.lib)文件,dll中有两个函数,原型如下:   ...

  8. 加载dll、lib库（例子的代码很全）

    是关于如何加载dll或lib库的.可以看这篇bog   Qt调用dll中的功能函数点击打开链接 **************************************************** ...

  9. Qt调用VS生成的dll

      预备知识: 1.如果在没有导入库文件(.lib),而只有头文件(.h)与动态链接库(.dll)时,我们才需要显示调用,如果这三个文件都全的话,我们就可以使用简单方便的隐式调用. 2.通常Windo ...

随机推荐

  1. Runtime实战之定制TabBarItem大小

    方案一:UIEdgeInsets 适用场景: 适合APP的TabBarItemImage的图片资源放在本地 图片超出tabbar的高度,需移动其位置,来进行适应 弊端: 若在本地配置好后,tabbar ...

  2. CentOS 7.2 安装配置Samba服务器

    1背景 转Linux刚刚1年,vim操作还不能应对工程代码,之前一直都是Gnome桌面 + Clion 作开发环境,无奈在服务器上没有这样的环境, 看同事是(Windows)Source Insigh ...

  3. Vimium使用快捷键总结

    chrome 快捷键: ctrl+w 关闭当前标签  ctrl+t 新建标签 gg行首 shift+g 行尾 Vimium使用快捷键总结 j, <c-e> : Scroll down k, ...

  4. Linux上设置memcached自启动

    #!/bin/sh # # memcached: MemCached Daemon # # chkconfig: - 90 25 # description: MemCached Daemon # # ...

  5. LL基本姿势

    在说怎么练习之前,先说说LL这个游戏里面的一些基本概念: 谱面元素(element) 谱面由一个个的音符组成,在LL中,音符(Note)分以下三类: 单点(下简称S,Single),同一时刻只有一个圆 ...

  6. Model Validation in ASP.NET Web API By Mike Wasson|July 20, 2012 268 of 294 people found this helpful

    using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using ...

  7. C# 利用ICSharpCode.SharpZipLib实现在线加密压缩和解密解压缩

    这里我们选用ICSharpCode.SharpZipLib这个类库来实现我们的需求. 下载地址:http://icsharpcode.github.io/SharpZipLib/ 1.单个或多个文件加 ...

  8. Android 蓝牙API详解

    随着近两年可穿戴式产品逐渐进入人们的生活,蓝牙开发也成为了Android开发的一个重要模块,下面我们就来说一说蓝牙的这些API. 1.蓝牙开发有两个主要的API: BuletoothAdapter:本 ...

  9. 利用ANTLR4实现一个简单的四则运算计算器

    利用ANTLR4实现一个简单的四则运算计算器 ANTLR4介绍 ANTLR能够自动地帮助你完成词法分析和语法分析的工作, 免去了手写去写词法分析器和语法分析器的麻烦 它是基于LL(k)的, 以递归下降 ...

  10. windows下利用virtual 安装 flask

    出处: https://segmentfault.com/a/1190000002450878 本文介绍Windows下如何从零开始搭建Python + Flask开发环境. 安装Python 2.7 ...