<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<title>angular</title>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<script type="text/javascript">

    //购物车中的数据;

    //var boughtList = {};

</script>

<style>

*{margin:0; padding:0; list-style:none;}

#wrap{font-size:12px; line-height:20px; padding:20px;}

.left li{float:left; padding:10px;}

.shopcar li{float:left; padding:10px;}

</style>

</head>

<body>

<div id="wrap" ng-app="myApp" ng-controller="showItem">

    <div style="overflow:hidden">

        <ul class="left">

            <li ng-repeat="value in items">

                <p>名称：{{value.name}}</p>

                <p>单价：{{value.price}}</p>

                <p><a href="javascript:;" ng-click="addToShopCarList()">购买</a></p>

            </li>

        </ul>

    </div>

    <hr />

    <p>点击购物车内的商品可以减少购买的商品数量</p>

    <div class="shopcar">

        <ul style="overflow:hidden;">

            <li ng-repeat="value in shopCar" ng-click="DelFromShopCarList()" style="cursor:pointer">

                <p>名称：{{value.name}}</p>

                <p>数量：{{value.amount}}</p>

                <p>单价：{{value.price}}</p>

            </li>

        </ul>

        <p>商品总价：{{total}} 元</p>

    </div>

</div>

<script type="text/javascript">

var item = [

    {id : '1',name : '蜂蜜'  ,price : 30},

    {id : '5',name : '鼠标'  ,price : 39},

    {id : '2',name : '黄豆酱',price : 15},

    {id : '3',name : '护手霜',price : 15},

    {id : '4',name : '保温杯',price : 29},

    {id : '6',name : '米老头',price : 18}

];

var shopCar=[];

var app=angular.module("myApp",[]);

app.controller("showItem",function($scope){

    $scope.total=0;

    $scope.items=item;

    $scope.shopCar=shopCar;

    $scope.DelFromShopCarList=function(){

        $scope.total-=this.value.price;

        for(var i=0;i<$scope.shopCar.length;i++){

            if($scope.shopCar[i].id==this.value.id){

                $scope.shopCar[i].amount-=1;

                if($scope.shopCar[i].amount===0){

                    $scope.shopCar.splice(i,1)

                }

            }

        }

    }

    $scope.addToShopCarList=function(){

        var item={

                name:this.value.name,

                price:this.value.price,

                id:this.value.id,

                amount:1,

        };

        var len=shopCar.length;

        var inArr=true;

        for(var i=0;i<len;i++){

            if(shopCar[i].id===this.value.id){

                inArr=false;

                shopCar[i].amount+=1;

                break;

            }

        }

        if(inArr){

            shopCar.push(item);

        }

        $scope.total+=shopCar[i].price;

    }

})

</script>

</body>

</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. WPF 动画效果

    线性插值动画.关键帧动画.路径动画 1. (Visibility)闪烁三下,停下两秒,循环: XAML: <Grid> <Grid.ColumnDefinitions> < ...

  2. CentOS 7 安装字体库 & 中文字体

    前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效:  如上图可以看出,不仅没有中文字体,连字体 ...

  3. sql rank（）函数

    RANK() OVER([<partiton_by_clause>]) partition_by_clause 将from子句生成的结果集划分为应用到RANK函数的分区.  Order_b ...

  4. 用SQL命令查看Mysql数据库大小

    要想知道每个数据库的大小的话,步骤如下: 1.进入information_schema 数据库(存放了其他的数据库的信息) use information_schema; 2.查询所有数据的大小: s ...

  5. LL基本姿势

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

  6. 【C# 进阶】事件！直接上事件！

    http://www.tracefact.net/csharp-programming/delegates-and-events-in-csharp.aspx ZiYang 张,何许人也?看了他写的博 ...

  7. 总结Android中遇见的OOM

    一 .Android应用中内存泄漏几种的原因: 1.单例模式导致的内存泄漏: 当调用getInstance时,如果传入的context是Activity的context.只要这个单例没有被释放,这个A ...

  8. AS3中 Event 类的target和currentTarget属性

    在事件处理过程中,会自动生成事件类的实例,并传给侦听器函数.通过这个参数就可以使用事件类的属性和方法.其中target与currentTarget属性是两个很相似的属性. 对于简单的事件处理过程,分清 ...

  9. MATLAB绘图

    matlab绘制散点图 clc,clear x=[11.9,11.5,14.5,15.2,15.9,16.3,14.6,12.9,15.8,14.1]; y=[196.84,196.84,197.14 ...

  10. VMWare虚拟机NAT上网方法 亲测可用

    首先虚拟机的网卡要选择NAT 然后 在Virtual Network Editor中一定选上DHCP功能. 还要主机的服务必须开启.主机的VMnet8对应NAT模式,这个VMnet8的配置保持默认不要 ...