<!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. http 登录Digest认证相关知识

    Digest access authentication https://en.wikipedia.org/wiki/Digest_access_authentication Digest acces ...

  2. goim socket丢包粘包问题解决。

    -(NSInteger)bytesToInt:(unsigned char*) data { return (data[3]&255)|(data[2]&255)<<8|( ...

  3. 3.Java Script 类型

     true: null==undefinedfalse: null===undefined   

  4. MongoDB win安装后无法远程连接访问

    mongoDB安装后无法远程连接访问,原因是端口没有开放允许连接的权限 开启允许连接的权限: 管理工具-高级win防火墙

  5. swift基础：第一部分：基本数据类型及结构

    首先谈点开心的:今天是周二,广州的天气格外明朗,早上上班的心情也不一样,最值得高兴事,很快到五一劳动节了,说到劳动节,放假是吧.你懂的.再来谈谈我上周的工作总结,上周可以说是黑轮压城城欲摧,甲光向日金 ...

  6. asp.net XMLHttpRequest 进度条以及lengthComputable always false的解决办法

    一直用ajax好长时间了,对其原理也有一些了解,最近由于项目需要,使用ajax异步进度条的效果,就研究了一下,用原生的XMLHttpRequest实现进度条函数,XMLHttpRequest有以下函数 ...

  7. 从JAVA看C#中volatile和synchronized关键字的作用

    最近一直在想C#中 volatile关键字到底是用来干什么的?查了很多.NET的文章都是说用volatile修饰的变量可以让多线程同时修改,这是什么鬼... 然后查到了下面这篇JAVA中关于volat ...

  8. EntityFramework 使用经验

    1.Nuget控制台常用命令 1.获取EntityFramework命令帮助:get-help EntityFramework  2.在项目中启动数据迁移:Enable-Migrations 3.添加 ...

  9. 自定义置顶TOP按钮

    简述一下,分为三个步骤: 1. 添加Html代码 2. 调整Css样式 3. 添加Jquery代码 具体代码如下: <style type="text/css"> #G ...

  10. quick-cocos2d-x :加入精灵背景

    最近几天都在学习 quick  找例子学习. 一直也没什么好的. 并且 还不会 lua .学习学习 突突突 官方文档上的打地鼠 都没了. 不知道为什么链接不好使. 好吧 那么今天就先做一个简单的 例子 ...