angularjs购物车效果
用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购物车效果的更多相关文章
- 使用session页面控制登录入口及购物车效果的实现
由于 Session 是以文本文件形式存储在服务器端的,所以不怕客户端修改 Session 内容.实际上在服务器端的 Session 文件,PHP 自动修改 Session 文件的权限,只 ...
- JavaScript实现的购物车效果-效果好友列表
JavaScript实现的购物车效果.当然,可以在许多地方使用这种效果.朋友的.例如,在选择.人力资源模块,工资的计算,人才选拔等..下面来看一下班似有些车效果图: watermark/2/text/ ...
- Android -- 贝塞尔二阶实现饿了么加入购物车效果
1,上周我们实现了简单的三阶贝塞尔曲线效果实例,今天是使用二阶贝塞尔曲线加动画实现的加入购物车效果,在码代码过程中出现了些问题,过一下和大家来探讨探讨,先看一下效果图 2,从上面的效果来看我们基本上可 ...
- jQuery实现购物车效果
简单的购物车效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- vue-transition实现加入购物车效果及其他动画效果实现
vue提供了<transition></transition>和<transition-group></transition-group>实现元素状态的 ...
- PC,移动端H5实现实现小球加入购物车效果
HTML部分: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" ...
- angularjs购物车练习
本文是一个简单的购物车练习,功能包括增加.减少某商品的数量,从而影响该商品的购买总价以及所有商品的购买总价:从购物车内移除一项商品:清空购物车. 页面效果如图: 若使用js或jQuery来实现这个页面 ...
- angularJs 购物车模型
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...
- ecshop加入购物车效果(各个页面)
ecshop中点击加入购物车出现下图 通过以下代码改成下图效果 1.后台网店设置 购物车确定提示 选择为“提示用户,点击“确定”进购物车” 2.打开js/common.js 104行就是funct ...
随机推荐
- UIAlertController 自定义输入框及KVO监听
UIAlertController极大的灵活性意味着您不必拘泥于内置样式.以前我们只能在默认视图.文本框视图.密码框视图.登录和密码输入框视图中选择,现在我们可以向对话框中添加任意数目的UITextF ...
- python基础(二)字符串內建函数详解
字符串 定义:它是一个有序的字符的集合,用于存储和表示基本的文本信息,''或""或''' '''中间包含的内容称之为字符串特性:1.只能存放一个值2.不可变,只能重新赋值3.按照从 ...
- DOM:文档对象模型 --树模型
文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西 一:window: 属性(值或者子对象):opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null ...
- diff命令参数
diff命令参数: diff - 找出两个文件的不同点 总览 diff [选项] 源文件 目标文件 描述 在最简单的情况是, diff 比较两个文件的内容 (源文件 和 目标文件). 文件名可以是 - ...
- [Usaco2008 Dec]Secret Message 秘密信息
2794: [Usaco2008 Dec]Secret Message 秘密信息 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 7 Solved: 3 ...
- 云脉推出表格识别API接口可以自助接入
针对如今市场上对于海量票据信息的录入需求,近期厦门云脉技术有限公司推出票据识别相关的产品与服务,更是在云脉OCR SDK开发者平台上上线表格识别API接口,供广大开发者和集成商自助接入.为了降低财务系 ...
- arcgis 瓦片图加载规则(转载)
arcgis 瓦片图加载规则 最近需要做地图离线的功能,要能下载指定区域的瓦片图,我们都知道如何加载谷歌和天地图的加载规则,但是网上貌似没有找到如何加载arcgis自己发布的瓦片图规则,好不容易找到一 ...
- Intent的属性及Intent-filter配置——Component属性
Intent的Component属性需要接受一个ComponentName对象,ComponentName对象包含如下几个构造器. ComponentName(String pkg,String cl ...
- KingbaseES的HA搭建
1.配置资源前准备: 安装好数据库并保持两台机器用户ID及组ID一致,组ID和用户ID在/etc/passwd查看,如不保持一致,可能导致切机时阵列的属主改变,导致数据库无法启动. 建议用法,现在两台 ...
- Bootstrap 按钮分组
Bootstrap 按钮分组: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...