<!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. C# out Keyword

    In C#, out keyword 是argument传值变成passed by reference. out keyword 在同时返回多个值时很有用. 与ref keyword 相似. 若是使用 ...

  2. 高级java必会系列一：多线程的简单使用

    众所周知,开启线程2种方法:第一是实现Runable接口,第二继承Thread类.(当然内部类也算...)常用的,这里就不再赘述.本章主要分析总结线程池和常用调度类. 一.线程池 1.newCache ...

  3. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  4. python之路 目录

    目录 python python_基础总结1 python由来 字符编码 注释 pyc文件 python变量 导入模块 获取用户输入 流程控制if while python 基础2 编码转换 pych ...

  5. h5 与app交互

    http://www.jianshu.com/p/7151987f012d JSContext *context = [self.webView valueForKeyPath:@"docu ...

  6. C++实现黄金分割数列(斐波纳奇数列)(非递归)

    斐波纳奇数列: 定义为F0=0,F1=1,......Fn=F(n-1)+F(n-2) 1,1,2,3,5,8,13,21,34,55....... void FibonacciOdd(int n) ...

  7. DevExpress 为TextEdit设置水印文字

    设置水印代码: //设置水印值public static void SetWatermark(this TextEdit textEdit, string watermark) { textEdit. ...

  8. ios下fixed回复框bug的解决方案

    前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中 ...

  9. Android仿“守望先锋”加载动画

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 效果图 实现思路 画一个小六边形 按效果图位置画七个小六边形 实现一个小六边形的显示与隐藏 ...

  10. 夺命雷公狗----Git---4---多人协作实现

    基本流程: 1..创建一个git裸服务器(git init --bare) 2..从裸服务器将版本库克隆到本地(git clone) 3..本地常规操作(git remote + git push o ...