购物车（angularjs）

最新推荐文章于 2018-09-19 08:44:02 发布
最新推荐文章于 2018-09-19 08:44:02 发布
阅读量433 收藏
点赞数
分类专栏： H5 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YHMQ66/article/details/78607711
版权 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            tbody tr:nth-child(even)
            {
                background: #FFFF80;

            }

            tbody tr:nth-child(odd)
            {
                background: #80FF80;

            }
            tbody tr:hover{
                background: #80FFFF;
            }

        </style>





        <script type="text/javascript" src="../bao/angular.js" ></script>
        <script>
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function($scope) {
                $scope.products = [{
                    "id": 80,
                    "name": "iPhone",
                    "price": 5400,
                    done:false
                }, {
                    "id": 1200,
                    "name": "ipad mini",
                    "price": 2200,
                    done:false
                }, {
                    "id": 500,
                    "name": "ipad air",
                    "price": 2340,
                    done:false
                }, {
                    "id": 290,
                    "name": "ipad",
                    "price": 1420,
                    done:false
                }, {
                    "id": 910,
                    "name": "imac",
                    "price": 15400,
                     done:false
                }];
                //筛选年龄
                $scope.pricefw="--请选择--";
                $scope.xuzhe=function(price)
                {
                    if($scope.pricefw=="--请选择--")
                    {
                          return true;
                    }else{
                        var arr=$scope.pricefw.split("-");
                        var minprice=arr[0];
                        var maxprice=arr[1];

                        if(price<minprice||price>maxprice)
                        {
                             return false;
                        }else{
                             return true;

                        }
                    }
                }

                //全选全不选
                $scope.allcheck=false;
                $scope.allselect=function()
                {

                    if($scope.allcheck)
                    {
                        for(index in $scope.products)
                        {
                            $scope.products[index].done=true;
                        }
                    }else{
                        for(index in $scope.products)
                        {
                            $scope.products[index].done=false;
                        }
                    }

                }
                //反选
                $scope.xuzedan=function()
                {
                    var flag=false;
                    for(index in $scope.products)
                    {

                        if(!$scope.products[index].done)
                        {
                            flag=true;
                        }

                    }

                    if(flag)
                    {
                        $scope.allcheck=false;
                    }else{
                        $scope.allcheck=true;
                    }
                }

                //批量删除
                $scope.plsc=function()
                {
                    if(confirm("你确定批量删除吗?"))
                    {
                    var  namearr=[];
                    for(index in $scope.products)
                    {
                        if($scope.products[index].done){

                            namearr.push($scope.products[index].name);
                           }
                    }

                    }
                    if(namearr.length<=0)
                    {
                        alert("没有选中项");

                    }else{
                            for(index  in  namearr){

                               var names=namearr[index];

                            for(index2 in $scope.products){

                                if(names==$scope.products[index2].name){

                                    $scope.products.splice(index2,1);
                                    alert("删除成功");
                                }
                            }
                    }
                }
            }

                //单个删除
                $scope.delone=function(name)
                {
                    if(confirm("你确定删除吗?"))
                    {
                       var  namearr2=[];
                       for(index in $scope.products)
                          {
                           if(name==$scope.products[index].name){

                            namearr2.push($scope.products[index].name);
                           }
                        }
                    }

                    if(namearr2.length>=0)
                    {
                        for(index  in  namearr2){

                               var namess=namearr2[index];

                            for(index2 in $scope.products){

                                if(namess==$scope.products[index2].name){

                                    $scope.products.splice(index2,1);
                                    alert("删除成功");
                                }
                            }
                    }
                }
            }

                //显示添加商品表
                $scope.isgoods=false;
                $scope.showadd=function()
                {
                    if($scope.isgoods)
                    {
                        $scope.isgoods=false;

                    }else{

                        $scope.isgoods=true;
                        $scope.isxiugai=false;
                    }


                }

                //添加提交验证
                    $scope.addId="";
                    $scope.addName="";
                    $scope.addPrice="";
                    $scope.isul=false;
                $scope.addtj=function()
                {
                    $scope.addyz=[];
                    if($scope.addId==""||$scope.addId==null)
                    {
                        $scope.addyz.push("产品编号不能为空");

                    }else if(isNaN($scope.addId)){

                        $scope.addyz.push("产品编号不是整数");
                    }

                    if($scope.addName==""||$scope.addName==null)
                    {
                        $scope.addyz.push("产品名字不能为空");

                    }
                    if($scope.addPrice==""||$scope.addPrice==null)
                    {
                        $scope.addyz.push("产品价格不能为空");

                    }else if(isNaN($scope.addPrice)){

                        $scope.addyz.push("产品价格不是整数");
                    }

                    if($scope.addyz.length>0)
                    {
                        $scope.isul=true;

                    }else{

                        var newgoods={
                            id: parseInt($scope.addId),
                          name: $scope.addName,
                         price: parseInt($scope.addPrice),
                          done:false


                        };

                        $scope.products.push(newgoods);
                    }
                }

                //显示修改表
                    $scope.updateId="";
                    $scope.updateName="";
                    $scope.updatePrice="";
                $scope.isxiugai=false;
                $scope.xiugai=function(pro)
                {
                    if($scope.isxiugai)
                    {
                        $scope.isxiugai=false;
                    }else{
                    $scope.updateId=pro.id;
                    $scope.updateName=pro.name;
                    $scope.updatePrice=pro.price;
                    $scope.isxiugai=true;
                    $scope.isgoods=false;

                    }
                }

                //修改提交验证
                   $scope.isul2=false;
                $scope.updatetj=function()
                {

                    $scope.updateyz=[];

                    if($scope.updateName==""||$scope.updateName==null)
                    {
                        $scope.updateyz.push("修改名字不能为空");

                    }
                    if($scope.updatePrice==""||$scope.updatePrice==null)
                    {
                        $scope.updateyz.push("修改价格不能为空");

                    }else if(isNaN($scope.updatePrice)){

                        $scope.updateyz.push("修改价格不是整数");
                    }

                    if($scope.updateyz.length>0)
                    {
                        $scope.isul2=true;

                    }else{
                        $scope.isul2=false;

                        for(index in $scope.products)
                        {

                            if($scope.updateId==$scope.products[index].id)
                            {
                                $scope.products[index].name=$scope.updateName;
                                $scope.products[index].price=$scope.updatePrice;
                                $scope.isxiugai=false;
                            }

                        }
                    }

                }
            });
        </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <center>
            <h3>购物车</h3>
            <input type="text" placeholder="产品名称" ng-model="namegjz" /> 产品价格
            <select  ng-model="pricefw">
                <option>--请选择--</option>
                <option>0-2000</option>
                <option>2001-3000</option>
                <option>3001-4000</option>
                <option>4001-5000</option>
                <option>5001-6000</option>
                <option>6001-7000</option>
                <option>7001-8000</option>
                <option>8001-无穷大</option>
            </select>
            <select ng-model="pxfs">
                <option value="">排序方式</option>
                <option value="id">id正序</option>
                <option value="-id">id逆序</option>
                <option value="price">价格正序</option>
                <option value="-price">价格逆序</option>
            </select>

            <button ng-click="plsc()">批量删除</button>

            <br /><br />
            <table border="1px solid blue" cellpadding="10" cellspacing="0">
                <thead>
                <tr style="background:#FF8080 ;">
                    <td><input type="checkbox" ng-model="allcheck" ng-click="allselect()"/></td>
                    <td>产品编号</td>
                    <td>产品名称</td>
                    <td>产品价格</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="sz in products|filter:{'name':namegjz}|orderBy:pxfs" ng-show="xuzhe(sz.price)">   
                    <td><input type="checkbox"  ng-model="sz.done" ng-click="xuzedan()"/></td>
                    <td>{{sz.id}}</td>
                    <td>{{sz.name}}</td>
                    <td>{{sz.price}}</td>
                    <td><button ng-click="delone(sz.name)" >删除</button><button ng-click="xiugai(sz)" >修改</button></td>
                </tr>
                </tbody>
            </table><br/>
            <button ng-click="showadd()">添加商品信息</button><br/>
            <br/>
            <div style="width:300px;border:1px solid blue"  ng-show="isgoods">
                <h3>添加商品</h3>
                商品编号:<input type="text" placeholder="商品编号" ng-model="addId"/><br/><br/>
                商品名称:<input type="text" placeholder="商品名称" ng-model="addName"/><br/><br/>
                商品价格:<input type="text" placeholder="商品价格" ng-model="addPrice"/><br/><br/>
                <ul style="background:#FFFF80" ng-show="isul">
                    <li ng-repeat="yz in addyz">{{yz}}</li>
               </ul>
                <input type="button" value="提交" ng-click="addtj()" />
            </div>

            <div style="width:300px;border:1px solid blue"  ng-show="isxiugai">
                <h3>修改商品</h3>
                商品编号:<input type="text" placeholder=""  ng-model="updateId" disabled="disabled"/><br/><br/>
                修改名称:<input type="text" placeholder=""  ng-model="updateName"/><br/><br/>
                修改价格:<input type="text" placeholder=""  ng-model="updatePrice"/><br/><br/>
                <ul style="background:#FFFF80" ng-show="isul2">
                    <li ng-repeat="xgyz in updateyz">{{xgyz}}</li>
               </ul>
                <input type="button" value="确定修改" ng-click="updatetj()" />
            </div>
        </center>
    </body>

</html>

这里写图片描述

YHMQ66
关注
专栏目录
AngularJS实现购物车功能
qq_44858021的博客
06-13 289
可实现数量加减,清空购物车,总价和总数计算 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../../bootstr...
Angularjs 制作购物车功能实例代码
10-21
在本实例中，我们将重点介绍如何利用AngularJS来制作一个简单的购物车功能，包括计算商品价格和删除购物车中的商品。 为了实现购物车功能，我们将使用AngularJS的数据绑定、指令、控制器和作用域。数据绑定允许我们...
京东购物车 angularjs+php
qq_39047764的博客
03-01 358
1：整体布局---局面写好a：要用两级ul li；2：PHP数据的输出可以实现3：数据联写好了4：问题，ng-bind用在div里面绑定，ng-model用在input里面绑定，都没法传到后台去5：item.gnum=item.gnum*1+1   加减数量可以实现，需要把字符串转化为数组，*1 即可6:&lt;input ng-model="name"&gt;&lt;p&gt;input 输入框...
AngularJs实现购物车
qq_41286390的博客
01-15 191
table{ width: 600px; } //表格隔行换色 table tr:nth-child(even){ background-color: cornsilk; } table tr:nth-child(odd){ background-color: cadetblue; } var
AngularJs 购物车
weixin_43143580的博客
09-19 188
&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt; &lt;script src="js/angularjs1.4.js" type=&quo
购物车angularJS删除和模糊查询还有排序
Wangmengyao1115的博客
11-17 257
var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.products = [{ "id":80, "name":"iphone", "price":5400 },{ "id":1200, "name":"ipad mini", "price":2200 },
angularjs完成购物车
Yanghongli_的博客
08-24 384
angular.module('myApp',[]) .service('data',function(){ return [ {id:1234,name:'ipad',price:3400}, {id:1244,name:'aphone',price:6400}, {id:1334,name:'mypad',price:4400}, {id:8234,name:'zpad',pric
angularjs 购物车
SuperZhongyulong的博客
03-27 222
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="utf-8" /&gt;        &lt;title&gt;&lt;/title&gt;        &lt;script type="text/javascript" src="js/angular
Angularjs 完成购物车
Yanghongli_的博客
09-20 361
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'shopcar.jsp' start
angularJs购物车列表
user_app的博客
01-16 240
html ng-app="myApp"> head> meta charset="utf-8" /> title>title> style> /*鼠标变小手*/ button{cursor: pointer;} table tr:nth-child(2n){
AngularJS 购物车实例
薄年再无木小白的专栏
02-27 1310
AngularJS 购物车实例
angularjs实现简单的购物车功能
10-19
AngularJS实现简单的购物车功能涉及了前端开发中常见的交互模式，即用户可以通过界面上的按钮增加或减少购物车中商品的数量，并能够查看总金额。此功能对于理解AngularJS的双向数据绑定、作用域($scope)、指令、过滤...
AngularJS购物车商品数量加减计算代码
01-03
在本文中，我们将深入探讨如何使用AngularJS实现购物车中的商品数量加减计算功能。AngularJS，一个由Google维护的JavaScript框架，以其双向数据绑定、模块化和丰富的指令集而闻名，非常适合构建交互性强的Web应用...
基于C语言的Dao编程语言设计源码
09-28
该项目是一款名为Dao的编程语言设计源码，采用C语言为主要开发语言，并辅以C、C++、Shell和CSS等语言。项目文件共计225个，其中包含126个Dao源文件、39个C源文件、36个C头文件、9个C++源文件、3个文本文件、2个Vim配置文件、1个ChangeLog文件、1个daomake工具文件、1个README文件、1个配置文件。这个项目旨在构建一个高效、可扩展的编程语言环境。
如何自定义数据集进行目标检测_keras-yolo3.zip
09-28
如何自定义数据集进行目标检测_keras-yolo3
基于JavaScript及多语言融合的勤工俭学平台设计源码
09-28
本项目是一款基于JavaScript及多语言融合的勤工俭学平台设计源码，共计367个文件，涵盖231个Java源代码文件、27个XML配置文件、23个JavaScript文件、19个CSS文件、8个PNG图像文件以及少量其他类型文件。该平台旨在为勤工俭学活动提供高效便捷的解决方案，支持多种语言的交互，满足不同用户的需求。
初始化对LoRA微调动态的影响研究
09-28
内容概要：研究了低秩适应（Low Rank Adaptation, LoRA）方法下不同随机初始化设置的效果与动态特性。论文主要发现，在初始化矩阵B为零、矩阵A随机时，模型通常可以使用更大的学习率并取得较好的效果，但这种情况下会出现内部不稳定现象。然而当A被初始化为零而B随机时，则不具备上述优势。通过理论和大量实验证明，初始化选择A而非B将导致更好的优化结果与训练稳定性。 适合人群：机器学习、神经网络的研究员、深度学习领域的科研学者。 使用场景及目标：在大规模语义模型的参数调整过程中选择恰当的初始化配置，从而提升效率以及性能。对于LoRA微调任务来说，在有限算力条件下高效地利用少量新增训练参数进行自适座行动。 其他说明：文中提出的结论有助于未来改进基于小样本学习的任务，同时指出了目前两种初始化方式均存在缺陷，提示可能需要进一步的研究来解决这些问题。尽管当前方法表现优于默认的LoRA初始化，但仍有一定局限性和潜在改进方向。
【PFJSP问题】基于matlab豪猪算法CPO求解置换流水车间调度问题PFSP【含Matlab源码 7895期】.mp4
09-28
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
IGWO-SVM：改良的灰狼优化算法改进支持向量机 采用三种改进思路：两种Logistic和Tent混沌映射和采用DIH策略
最新发布
09-28
IGWO-SVM：改良的灰狼优化算法改进支持向量机。 采用三种改进思路：两种Logistic和Tent混沌映射和采用DIH策略。 采用基于DIH维度学习的狩猎搜索策略为每只狼构建邻域，增强局部和全局搜索能力，收敛速度比GWO更快，适用于paper。
AngularJS购物车实现教程
"这篇PPT主要讲解如何使用AngularJS实现一个购物车功能，适合初学者入门。内容包括使用AngularJS的ngRepeat指令来渲染商品列表，实现添加和移除购物车，修改商品数量以及实时计算总价。此外，还对比了传统以jQuery为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值