(网页)angular js 终极购物车(转)
转自CSDN: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="angularjs/angular.js"></script>
<style>
.box{
width: %;
border-bottom: 1px solid silver;
}
.box1{
width: %;
margin-top: 5px;
}
.box1 button{
width: 100px;
height: 40px;
background: crimson;
color: white;
text-align: center;
line-height: 40px;
float: right;
border: ;
border-radius: 13px;
}
table{
width: %;
}
tr td button{
background: blue;
color: white;
border: ;
} </style>
<script>
var my=angular.module("my",[]);
my.controller("mys",function ($scope) {
/*声明数据对象，初始化商品信息，数据自拟且不低于四条*/
$scope.arr=[
{name:"qq",price:12.9,number:,state:false},
{name:"wx",price:23.9,number:,state:false},
{name:"aa",price:99.9,number:,state:false},
{name:"bb",price:10.9,number:,state:false}
];
/*删除条目*/
$scope.del=function (index) {
if(confirm("确定移除此项嘛？")){
$scope.arr.splice(index,);
}
}
/*点击”+”按钮输入框中的数量加1,同时可以计算出商品小计,和购物 车总价*/
$scope.jia=function (index) {
$scope.arr[index].number++;
}
/*当点击”-”按钮时输入框中的数量减1,商品小计和总价*/
$scope.jian=function (index) {
if($scope.arr[index].number>){
$scope.arr[index].number--;
}
else if($scope.arr[index].number==){
if(confirm("用户是否删除该商品")){
$scope.arr.splice(index,);
}
}
}
/*计算总价格*/
$scope.allSum=function () {
var allPrice=;
for(var i=;i<$scope.arr.length;i++){
allPrice+=$scope.<span style="color:#660e7a"><strong>arr</strong></span>[<span style="color:#458383">i</span>].<span style="color:#660e7a"><strong>price</strong></span>*$scope.arr[i].number;
}
return allPrice;
};
/*清空购物车*/
$scope.alldel=function () {
if($scope.arr.length==){
alert("您的购物车已空");
}else{
$scope.arr=[];
}
}
/*用户点击第一个checkbox代表全选，全选商品后点击删除选中商品，选中商品被删除， 若购物车商品被全部删除后*/
$scope.allCheck=false;
$scope.allx= function () {
for(var i=;i<$scope.arr.length;i++){
if($scope.allCheck==true){
$scope.arr[i].state=true;
}else {
$scope.arr[i].state=false;
}
}
};
/*每个复选框*/
$scope.itemCheck = function () {
var flag = ;
for(var i = ; i<$scope.arr.length; i++){
if($scope.arr[i].state == true){
flag ++;
}
}
if(flag == $scope.arr.length){
$scope.allCheck = true;
}else{
$scope.allCheck = false;
}
};
/*批量删除*/
$scope.pi=function () {
for(var i=;i<$scope.arr.length;i++){
if($scope.arr[i].state==true){
$scope.arr.splice(i,);
i--;
$scope.allCheck = false;
}
}
}
});
</script>
</head>
<body ng-app="my" ng-controller="mys">
<div class="box">
<h2>我的购物车</h2>
</div>
<div class="box1">
<button ng-click="alldel()" style="margin-right: 10px">清空购物车</button><button ng-click="pi()" style="margin-left: 5px">批量删除</button>
</div>
<div class="box2">
<table border="">
<tr>
<th><input type="checkbox" ng-model="allCheck" ng-click="allx()"/></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
<!--用ng-repaet指令将对象遍历并渲染到页面中-->
<tr ng-repeat="item in arr">
<td><input type="checkbox" ng-model="item.state" ng-click="itemCheck()"/></td>
<td>{{item.name}}</td>
<td>{{item.price | currency:"￥："}}</td>
<td><button ng-click="jian($index)">-</button>
<input type="text" value="{{item.number}}" style="width: 30px;padding-left: 20px"/>
<button ng-click="jia($index)">+</button>
</td>
<td>{{item.price*item.number | currency:"￥："}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
<tr>
<td colspan="">总金额<span ng-bind="allSum()|currency:'￥：'"></span></td>
</tr>
</table>
</div>
</body>
</html>
(网页)angular js 终极购物车(转)的更多相关文章
- (网页)Angular.js 中 copy 赋值与 = 赋值 区别
转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...
- (翻译)Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- Angular JS学习之指令
1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...
- Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- angular.js学习
1.第一个小例子 <!DOCTYPE html> <html> <body> <div ng-app=""> <p>在输 ...
- Angular JS 学习笔记（二）
1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...
- 什么是Angular JS？
Angular JS学习笔记——什么是Angular JS? Angular JS是一个由Google维护的开源的Javascript框架,主要作者为: Misko Hevery(angular JS ...
- angular.js——小小记事本3
app.js部分,首先是路由.这个之前讲过了,链接在这里—— http://www.cnblogs.com/thestudy/p/5661556.html var app = angular.modu ...
- angular.js之路由的选择
在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西 ...
随机推荐
- 记一次sentry部署过程
本文记录下部署sentry和其中遇到的问题 Sentry 是一款基于 Django实现的错误日志收集和聚合的平台,它是 Python 实现的,但是其日志监控功能却不局限于python,对诸如 Node ...
- python(leetcode)-136只出现一次的数字
给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1: 输入: [ ...
- 基数排序的理解和实现(Java)
基数排序是桶排序的扩展算法,其思想是:将整数按位数切割成不同的数字,然后按每个位数分别比较排序. 算法流程: 将所有待比较数值统一为同样的数位长度,数位较短的数前面补零. 从最低位开始,依次进行一次排 ...
- Nginx + Uswgi + Django的部署
Nginx + Uswgi + Django的部署 待更新 https://code.ziqiangxuetang.com/django/django-static-files.html https: ...
- mysql主从复制总结
第一步:开启所有MYSQL服务器的BIN日志,每台服务器设置一个唯一的server-id的值(默认是1,一般取IP最后一段) 修改主服务器(master)的my.cnf [mysqld] log-bi ...
- AI时代的OCR识别技术浅析
人工智能这个词可谓是耳熟能详,近几年人工智能热潮再次席卷而来,引起轰动的要数google的AlphaGo,相继打败了围棋界的韩国选手李世石以及世界冠军柯洁,见证了人工智能发展的里程碑式的变革,人工智能 ...
- WEB安全：Tomcat 只可通过域名访问，禁止通过 IP 访问
服务器为什么要禁止通过IP直接访问? 1.若公布于外网的服务器IP地址未备案,就有可能被工信部查封.这样备案的域名也会无法访问. 2.如果AppScan通过ip访问扫描,会有“发现内部ip泄露模式”的 ...
- Struts2学习（四）———— ognl表达式、值栈、actionContext之间的关系
一.什么是Ognl? 通过百度百科查询到的解释,其中详细的说明了OGNL的作用. 下面我们就对OGNL这5个作用进行讲解 1.存取对象的任意属性,简单说就是对javabean进行操作(重要) 2.调用 ...
- 【NET CORE微服务一条龙应用】第二章 配置中心使用
背景 系列目录:[NET CORE微服务一条龙应用]开始篇与目录 在分布式或者微服务系统里,通过配置文件来管理配置内容,是一件比较令人痛苦的事情,再谨慎也有湿鞋的时候,这就是在项目架构发展的过程中,配 ...
- 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...