<!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. Windows RabbitMQ 命令

    启动: 后台运行:rabbitmq-server -detached D:\Program Files\RabbitMQ Server\rabbitmq_server-3.6.6\sbin>ra ...

  2. nvm诡异的报错

    安装:curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash wget -qO- htt ...

  3. LVM 'Can’t open /dev/sdb1 exclusively. Mounted filesystem?' Problem

    服务器做mysql时候,添加的新磁盘做lvm时候,创建物理卷报错 saltstack_s:/proc/scsi # cat /proc/partitions major minor #blocks n ...

  4. Trace-如何跟踪某个Job的开销

    1.背景 下面是从以往Profiler收集的跟踪文件中提取Job有关数据 ;with cte as( Duration_ms ,CPU CPU_ms,Reads,Writes,StartTime,En ...

  5. WPF 仪表盘 刻度盘 动态 加载中 开源

    1. 表盘 参数可以设置, codeproject上写的.网址在这里. 源码里有demo,很详细. 源码在这里. 2. 动态Loading 截图效果跟实际有点不一样. 自己把源码写成 资源就好用了呗 ...

  6. 收集一些关于OI/ACM的奇怪的东西……

    一.代码: 1.求逆元(原理貌似就是拓展欧几里得,要求MOD是素数): int inv(int a) { if(a == 1) return 1; return ((MOD - MOD / a) * ...

  7. window.onload和$(document).ready()的区别

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  8. java布局学习 （一）

    Java 程序通过jvm可以很好的移植到其他平台上,但是java 生成的图形界面样式,在不使用布局的情况下,往往需要重新设定大小,才能在新的平台上调整到最佳样式.这是由于组件的最佳大小 往往是与平台相 ...

  9. mono支持gb2312

    需要安装mono-locale-extras 输入命令 yum install -y mono-locale-extras 安装即可

  10. LAMP环境搭建

    安装前说明: 先安装gcc gcc-c++ make 等 可用yum install -y gcc gcc-c++ make 也可以使用rpm安装不过需要注意依赖 1.安装apache 下载链接:ht ...