<!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. 用java 代码下载Samba服务器上的文件到本地目录以及上传本地文件到Samba服务器

    引入: 在我们昨天架设好了Samba服务器上并且创建了一个 Samba 账户后,我们就迫不及待的想用JAVA去操作Samba服务器了,我们找到了一个框架叫 jcifs,可以高效的完成我们工作. 实践: ...

  2. SecureCRT连接VirtualBox下的ubuntu以及NMP的搭建与通过宿主机访问该NGINX服务器过程

    一直使用wamp作为开发环境,只是工作中时常会遇到在wamp下没问题但是提交到服务器生产环境会出现一些意想不到的情况,由此萌生了在本机搭建LNMP环境的想法,我个人不知道其他人的虚拟机搭建服务器环境是 ...

  3. Java 实现函数回调

    在Java里没用委托(delegate)这方法,所以想要实现回调还是有些麻烦.(想了解C#如何实现?请查看:http://www.cnblogs.com/Martin_Q/p/4478494.html ...

  4. spark 基本操作

    读取文件的数据 使用的数据:https://codeload.github.com/xsankar/fdps-v3/zip/master 读取单个文件的数据 case class Employee(E ...

  5. 使用Charles检测HTTPS网站的数据包

    1.下载Charles 下载地址:https://www.charlesproxy.com/download/ 2.安装Charles的证书 选择Help->SSL Proxying->I ...

  6. 使用mybatis-generator自动生成映射配置

    使用mybatis时,编写实体类与数据库的映射是一项繁琐的工作,很容易出错,而mybatis-generator工具很好地解决了这个问题. 一.工具下载与配置  下载地址:① https://gith ...

  7. 分析App应用市场， App应用有哪些类型

    随着移动互联网的流行,APP应用也是异常火爆,App应用市场就如破冰的泉水在我们的生活中到处渗透,对于App开发的的状况来分析,企业在寻找技术人员开发一款专业的App软件的时候,必须先了解用户的需求与 ...

  8. let和const命令//////////////////////z

    let和const命令 let命令 块级作用域 const命令 全局对象的属性 let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的 ...

  9. Java：回调机制

    引用:http://blog.sina.com.cn/s/blog_48cf38890100go6x.html 1.  什么是回调函数    回调函数(callback Function),顾名思义, ...

  10. Given a code_combination_id how can i get the code description? 获取科目组合描述

    SELECT c.code_combination_id, c.concatenated_segments, apps.fa_rx_flex_pkg.get_description(101 -- p_ ...