angularjs购物车练习
本文是一个简单的购物车练习,功能包括增加、减少某商品的数量,从而影响该商品的购买总价以及所有商品的购买总价;从购物车内移除一项商品;清空购物车。
页面效果如图:
若使用js或jQuery来实现这个页面,会需要绑定很多事件,如减少数量按钮事件,增加数量按钮事件,移除某项商品事件,清空购物车事件,而这些事件之中很多代码很重复,比如计算某项商品的总购买价,计算所有商品的购买总价,不胜其烦,现在有了AngularJS,则简单许多,因为数据模型双向绑定等原因。
上图页面的代码:
html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>angular购物车练习</title>
- <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.css">
- <script src="../../vendor/angular/angular.min.js"></script>
- <script src="app/index2.js"></script>
- </head>
- <body ng-app="myApp" ng-controller="myCtrl">
- <div class="container">
- <table class="table" ng-show="cartList.length > 0">
- <thead>
- <tr>
- <th>产品编号</th>
- <th>产品名称</th>
- <th>购买数量</th>
- <th>产品单价</th>
- <th>产品总价</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="item in cartList">
- <td>{{item.id}}</td>
- <td>{{item.name}}</td>
- <td>
- <button ng-click="reduceOne(item.id)" class="btn btn-primary">-</button>
- <input type="text" ng-model="item.quantity">
- <button ng-click="addOne(item.id)" class="btn btn-primary">+</button>
- </td>
- <td>{{item.price}}</td>
- <td>{{item.quantity * item.price}}</td>
- <td><button ng-click="remove(item.id)" class="btn btn-danger">移除</button></td>
- </tr>
- <tr>
- <td>总购买价</td>
- <td>{{totalCost()}}</td>
- <td>总购买数量</td>
- <td>{{totalCount()}}</td>
- <td colspan="3"><button ng-click="cartList=[]" class="btn btn-danger">清空购物车</button></td>
- </tr>
- </tbody>
- </table>
- <h4 ng-show="cartList.length < 1">您的购物车暂无商品</h4>
- </div>
- </body>
- </html>
index2.js :
- var app=angular.module("myApp",[]);
- app.controller("myCtrl",function($scope){
- $scope.cartList=[
- {id:1000,name:"iphone5s",quantity:3,price:4300},
- {id:1001,name:"iphone5",quantity:30,price:3300},
- {id:1002,name:"imac",quantity:3,price:3000},
- {id:1003,name:"ipad",quantity:5,price:6900}
- ];
- var findIndex=function(id){
- var index=-1;
- angular.forEach($scope.cartList,function(item,key){
- if(item.id == id){
- index=key;
- return;
- }
- });return index;
- };
- //从cartList数组中删除一项产品
- $scope.remove=function(id){
- var index=findIndex(id);
- if(index != -1){
- $scope.cartList.splice(index,1);
- }
- };
- //为某个商品添加一个数量
- $scope.addOne=function(id){
- var index=findIndex(id);
- if(index != -1){
- $scope.cartList[index].quantity ++;
- }
- };
- //位某个商品减少一个数量
- $scope.reduceOne=function(id){
- var index=findIndex(id);
- if(index != -1){
- var item=$scope.cartList[index];
- if(item.quantity > 1){
- item.quantity --;
- }else{
- var returnKey=confirm("删除该商品?");
- if(returnKey){
- $scope.remove(item.id);
- }
- }
- }
- };
- //总购买价
- $scope.totalCost=function(){
- var total=0;
- angular.forEach($scope.cartList,function(item,key){
- total += item.quantity * item.price;
- });return total;
- };
- //总购买数量
- $scope.totalCount=function(){
- var count=0;
- angular.forEach($scope.cartList,function(item,key){
- count += item.quantity;
- });return count;
- };
- //监听输入框更改事件避免输入负数或字符串
- $scope.$watch('cartList',function(newValue,oldValue){
- console.log( "$scope.cartList === newValue "+ ($scope.cartList === newValue) ); //永远为ture newValue指向cartList
- console.log( "$scope.cartList === oldValue "+ ($scope.cartList === oldValue) ); //页面初始化后为true 一旦改动永远为false
- angular.forEach(newValue,function(item,key){
- if( isNaN(item.quantity) ){
- item.quantity=oldValue[key].quantity;
- }
- else if( item.quantity <= 0 ){
- var returnKey=confirm("删除该商品?");
- if(returnKey){
- $scope.remove(item.id);
- }else{
- item.quantity=oldValue[key].quantity;
- }
- }
- });
- },true);
- });
页面中的指令:
ng-app 指定一个应用程序
ng-controller 指定一个控制器
ng-show 值表达式为 true 时,显示本Dom
ng-repeat 重复本Dom
ng-click 指定一个单击事件
angularjs购物车练习的更多相关文章
- angularjs购物车效果
用angularjs写了一个购物车效果中. html代码: <div png-app="myAp" ng-controller="conTroll"> ...
- angularJs 购物车模型
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...
- 动态枢轴网格使用MVC, AngularJS和WEB API 2
下载shanuAngularMVCPivotGridS.zip - 2.7 MB 介绍 在本文中,我们将详细介绍如何使用AngularJS创建一个简单的MVC Pivot HTML网格.在我之前的文章 ...
- AngularJS 实现简单购物车
使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用 ...
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证
原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证 chsakell分享了前端使用AngularJS,后端使用ASP. ...
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session
原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NE ...
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端
原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端 chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车 ...
- angularJS商品购物车案例
<!DOCTYPE html> <html ng-app="shopping"> <head lang="en"> < ...
- angularJs 使用中遇到的问题小结【二:购物车引起的问题思考】
问题描述 :购物车引起的问题思考 业务逻辑是这样的:我商品加入购物车后,——>点击购物车图标——>进入订单列表(这里的数据只有首次会加载服务器数据,后面就不会执行控制器的方法了,这里的跳转 ...
随机推荐
- 最小化安装CentOS7的网卡设置
实验环境:CentOS 7 Minimal Installation 64bit (1511) 最小化安装CentOS 7 后,查看网卡的信息让人很意外,因为网卡的命名规则变了,网卡的名字让人很难懂. ...
- 【Flask】 网站的用户管理
网站用户管理 不知道为什么很多学习Flask的人都是从搭博客开始的(大概是因为那本书的案例是博客,同时对bootstrap支持良好,bootstrap又是twitter开发的吧..)既然是搭建博客,就 ...
- Algorithm --> 树中求顶点A和B共同祖先
树中求顶点A和B共同祖先 题目: 给定一颗树,以及两个顶点A和B,求最近的共同祖先,和包含的子顶点个数? 比如:给定如下图的树,以及顶点13和8,则共同祖先为3,以3为root的子顶点共有8个
- jdk自带的MD5进行数据的加密与解密
package com.tools.util; import java.io.IOException; import java.io.UnsupportedEncodingException; imp ...
- 0x00-Kali Linux 系列入门篇
Kali Linux介绍篇 Kali Linux 官网:https://www.kali.org/ Kali Linux 前身是著名渗透测试系统BackTrack ,是一个基于 Debian 的 Li ...
- 福州大学W班-团队作业-随堂小测(同学录)成绩
作业链接 https://edu.cnblogs.com/campus/fzu/FZUSoftwareEngineering1715W/homework/1246 作业要求 1.题目 即编写一个能够记 ...
- C语言博客作业—函数嵌套调用
一.实验作业 1.1 PTA题目:递归法对任意10个数据按降序排序 1.1.1设计思路 void sort(int a[],int n) { 定义整型循环变量i,中间变量temp,最小值min: 令m ...
- 20155215 第二周测试1 与 myod
课堂测试 第一题 每个.c一个文件,每个 .h一个文件,文件名中最好有自己的学号 用Vi输入图中代码,并用gcc编译通过 在Vi中使用K查找printf的帮助文档 提交vi编辑过程截图,要全屏,包含自 ...
- python的迭代器、生成器、装饰器
迭代器.生成器.装饰器 在这个实验里我们学习迭代器.生成器.装饰器有关知识. 知识点 迭代器 生成器 生成器表达式 闭包 装饰器 实验步骤 1. 迭代器 Python 迭代器(Iterators)对象 ...
- jquery基本使用和实例
一.寻找元素 表单选择器 $(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") / ...