用angularjs写了一个购物车效果中。

html代码:

<div png-app="myAp" ng-controller="conTroll">
<h3>
您选中了{{getLen()}}个商品
</h3>
<ul>
{{setHtml()}}
<li ng-repeat="item in youso">
<span>商品:{{item.youName}},</span>
<input type="button" value="-"ng-click = "dudectNum($index)"/>
<input type="text" ng-model="item.count" readonly />
<input type="button" ng-click = "addNum($index)" value="+" />
<span>单价:${{item.pice}},</span>
<span>总价格:${{item.count*item.pice}}</span>
<button ng-click="rest($index)">重置</button>
<button ng-click="remove($index)">移除商品</button>
</li> </ul>
</div>

js代码:

var myApp = angular.module("myApp",[])
.controller("conTroll",["$scope",function (scope){
//商品基本信息
var youso = [
{
youName:"上衣",
pice:"20",
count:1
},
{
youName:"裤子",
pice:"50",
count:1
},
{
youName:"帽子",
pice:"100",
count:1
}
]; scope.youso = youso; //计算选中的商品个数
scope.getLen = function (){
return youso.length;
};
//重置
scope.rest = function (index){
scope.youso[index].count = 1;
};
//删除
scope.remove = function (index){
scope.youso.splice(index,1);
};
//加法
scope.addNum = function (index){
scope.youso[index].count++;
};
//减法
scope.dudectNum = function (index){
if(scope.youso[index].count<= 0) scope.youso[index].count = 0;
else scope.youso[index].count--;
};
         //没有物品时提醒选择
scope.setHtml = function (){
if(!scope.youso.length) return "请选择商品!";
}; }]);

angularjs购物车效果的更多相关文章

  1. 使用session页面控制登录入口及购物车效果的实现

          由于 Session 是以文本文件形式存储在服务器端的,所以不怕客户端修改 Session 内容.实际上在服务器端的 Session 文件,PHP 自动修改 Session 文件的权限,只 ...

  2. JavaScript实现的购物车效果-效果好友列表

    JavaScript实现的购物车效果.当然,可以在许多地方使用这种效果.朋友的.例如,在选择.人力资源模块,工资的计算,人才选拔等..下面来看一下班似有些车效果图: watermark/2/text/ ...

  3. Android -- 贝塞尔二阶实现饿了么加入购物车效果

    1,上周我们实现了简单的三阶贝塞尔曲线效果实例,今天是使用二阶贝塞尔曲线加动画实现的加入购物车效果,在码代码过程中出现了些问题,过一下和大家来探讨探讨,先看一下效果图 2,从上面的效果来看我们基本上可 ...

  4. jQuery实现购物车效果

    简单的购物车效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. vue-transition实现加入购物车效果及其他动画效果实现

    vue提供了<transition></transition>和<transition-group></transition-group>实现元素状态的 ...

  6. PC,移动端H5实现实现小球加入购物车效果

    HTML部分: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" ...

  7. angularjs购物车练习

    本文是一个简单的购物车练习,功能包括增加.减少某商品的数量,从而影响该商品的购买总价以及所有商品的购买总价:从购物车内移除一项商品:清空购物车. 页面效果如图: 若使用js或jQuery来实现这个页面 ...

  8. angularJs 购物车模型

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  9. ecshop加入购物车效果(各个页面)

    ecshop中点击加入购物车出现下图 通过以下代码改成下图效果 1.后台网店设置 购物车确定提示  选择为“提示用户,点击“确定”进购物车” 2.打开js/common.js  104行就是funct ...

随机推荐

  1. nodejs抓取数据一(列表抓取)

    纯属初学...有很多需要改进的地方,请多多指点... 目标是抓取58同城 这个大分类下的列表数据: http://cd.58.com/caishui/?PGTID=14397169455980.924 ...

  2. VB.NET中网络编程所需组件WinHTTP的添加

    VB.NET中网络编程所需组件: WinHTTP组件:项目-->添加引用-->COM选项卡-->Microsoft WinHTTP Services,version 5.1--> ...

  3. jstree使用小结(一)

    项目中用到tree结构,使用了jstree做个笔记如下: 1. 官网: http://www.jstree.com/    有时候打不开,那就只能等打得开的时候再看了...O(∩_∩)O [PS: 一 ...

  4. EF dbcontext上下文的处理

    ,那么我们整个项目里面上下文的实例会有很多个,我们又遇到了多次,当我们在编程的时候遇到多的时候,一般我们就要想想能不能解决多这个问题. (2)这里我要说的是EF上下文怎么管理呢?很简单啦,就是要保证线 ...

  5. 【Xilinx-Petalinux学习】-03-PetaLinux通过eMMC方式启动

    前面说的我的硬件上有一颗eMMC的芯片,型号是MTFC4GACAJCN-4M IT,有4GB的容量. BOOT.bin的文件较小,只有不到3MB,但是image.ub的文件根据不同的需求,将来可能会越 ...

  6. bzoj3551

    3551: [ONTAK2010]Peaks加强版 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 877  Solved: 297[Submit][S ...

  7. 【MySQL】JDBC连接MySQL的一些问题以及解决办法

    [MySQL]JDBC连接MySQL的一些问题以及解决办法 http://blog.csdn.net/baofeidyz/article/details/52017047

  8. python pandas dataframe to_sql方法error及其解决

    今天遇到了一个问题,很是奇怪,自己也想了一个另类的方法将其解决了,现在将详细过程经过记录如下: 我在处理完一个dataframe之后,需要将其写回到数据库.这个dataframe比较大,共有53列,7 ...

  9. Borda count

    波达计数法(Borda Count)是较为简单的排序投票法,每个选项借由选票上的排序来取得积分,积分最高者获胜.另一个类似的方法则是位置投票制. 投票人按喜好排列候选者.如果候选者在选票的排第一位,它 ...

  10. 【python之路12】三元运算符(if)

    1.三元运算符条件语句 普通if条件是这样写的: n = 1 if n > 0: st = '大于0' else: st = '小于等于0' print(st) 三元运算符的写法: n = 1 ...