购物车（angularJS）

最新推荐文章于 2018-10-19 11:15:58 发布
最新推荐文章于 2018-10-19 11:15:58 发布
阅读量229 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ysc332606387/article/details/78607763
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>max</title>
    <style>
        .tab tbody tr:nth-child(odd){background-color: #ffacbd}
        .tab tbody tr:nth-child(even){background-color: #f00}
    </style>
    <script src="../angular.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
 /*-----------------定义数据源----------------------------------------------------------------*/
            $scope.data = [{
                "id": 80,
                "name": "iPhone",
                "price": 5400,
                state: false
            }, {
                "id": 1200,
                "name": "ipad mini",
                "price": 2200,
                state: false
            }, {
                "id": 500,
                "name": "ipad air",
                "price": 2340,
                state: false
            }, {
                "id": 290,
                "name": "ipad",
                "price": 1420,
                state: false
            }, {
                "id": 910,
                "name": "imac",
                "price": 15400,
                state: false
            }];
/*-----------------下拉菜单排序----------------------------------------------------------------*/
            $scope.PXfs="id";
/*-----------------下拉菜单筛选----------------------------------------------------------------*/
            $scope.SXqj="--请选择--";
            $scope.isShow=function (data) {
                if ($scope.SXqj=="--请选择--"){
                    return true;
                }else {
                    var arr = $scope.SXqj.split("-");
                    var mini = arr[0];
                    var max = arr[1];
                    if (data<mini || data>max){
                        return false;
                    }else {
                        return true;
                    }
                }
            }
/*------------------ 全选 && 全不选  -----------------------------------------------------------*/
            $scope.all = false;
            $scope.ALL = function () {
                if ($scope.all){
                    for (d in $scope.data){
                        $scope.data[d].state=true;
                    }
                }else {
                    for (d in $scope.data){
                        $scope.data[d].state=false;
                    }
                }
            }
/*---------------- 反选 -----------------------------------------------------------------------*/
            $scope.FX=function () {
                var a=0;
                for (d in $scope.data){
                    if($scope.data[d].state==false){
                        a++;
                    }
                }
                if(a==0){
                    $scope.all = true;
                }else {
                    $scope.all = false;
                }
            }
/*-------------------单项删除------------------------------------------------------------------*/
            $scope.DXsc=function (data) {
                if(confirm("删除操作将不可逆!是否确定删除？")){
                    for (d in $scope.data){
                        if($scope.data[d].name==data){
                            $scope.data.splice(d,1);
                        }
                    }
                }
            }
/*---------------- 批量删除 -------------------------------------------------------------------*/
            $scope.PLsc=function () {
                var arr=[];
                for (d in $scope.data){
                    if($scope.data[d].state==true){
                        arr.push($scope.data[d].name);
                    }
                }
                if (arr.length==0){
                    alert("请选中数据！");
                }else {
                    if(confirm("删除操作将不可逆!是否确定删除？")) {
                        for (a in arr) {
                            for (d in $scope.data) {
                                if ($scope.data[d].name == arr[a]) {
                                    $scope.data.splice(d, 1);
                                }
                            }
                        }
                    }
                }
            }
/*---------------- 修改-------------------------------------------------------------------------*/
            $scope.XGbh="";
            $scope.XGmc="";
            $scope.XGjg="";
            $scope.XGmc1="";
            $scope.XGjg1="";
            $scope.flag=false;
            $scope.XG=function (data) {
                if($scope.flag==true){
                    $scope.flag=false;
                }else {
                    $scope.flag=true;
                }
                for (d in $scope.data){
                    if($scope.data[d].id==data){
                        $scope.XGbh=$scope.data[d].id;
                        $scope.XGmc=$scope.data[d].name;
                        $scope.XGjg=$scope.data[d].price;
                    }
                }
                $scope.Tj=function () {
                    if (isNaN($scope.XGjg1)){
                        alert("产品价格输入类型有误！");
                        $scope.flag=true;
                    }else if($scope.XGmc1=="" || $scope.XGmc1==null ||$scope.XGjg1=="" || $scope.XGjg1==null){
                        alert("修改内容不能为空！");
                        $scope.flag=true;
                    } else {
                        for (d in $scope.data){
                            if($scope.data[d].id==$scope.XGbh){
                                $scope.data[d].name=$scope.XGmc1;
                                $scope.data[d].price=parseInt($scope.XGjg1);
                            }
                        }
                        $scope.XGmc1="";
                        $scope.XGjg1="";
                        $scope.flag=false;
                    }
                }
            }
/*---------------- 添加-------------------------------------------------------------------------*/
            $scope.flag1=false;
            $scope.flag2=true;
            $scope.TJbh="";
            $scope.TJmc="";
            $scope.TJjg="";
            $scope.add=function () {
                if($scope.flag1==true){
                    $scope.flag1=false;
                }else {
                    $scope.flag1=true;
                }
                $scope.TJ=function () {
                    $scope.flag2=true;
                    if($scope.TJbh==""||$scope.TJbh==null||$scope.TJmc==""||$scope.TJmc==null||$scope.TJjg==null||$scope.TJjg==""){
                        alert("输入内容不能为空！");
                        $scope.flag2=false;
                    }else {
                        for (d in $scope.data){
                            if($scope.data[d].id==$scope.TJbh){
                                alert("产品编号已存在！");
                                $scope.flag2=false;
                            }else if($scope.data[d].name==$scope.TJmc) {
                                alert("产品名称已存在！");
                                $scope.flag2=false;
                            }
                        }
                    }
                    if ($scope.flag2==true){
                        $scope.add={
                            id:parseInt($scope.TJbh),
                            name:$scope.TJmc,
                            price:parseInt($scope.TJjg),
                            state: false
                        };
                        $scope.data.push($scope.add);
                        $scope.TJbh="";
                        $scope.TJmc="";
                        $scope.TJjg="";
                        var a=0;
                        for (d in $scope.data){
                            if($scope.data[d].state==false){
                                a++;
                            }
                        }
                        if(a==0){
                            $scope.all = true;
                        }else {
                            $scope.all = false;
                        }
                    }
                }
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
    <h3>购物车</h3>
    <p>
        <input type="text" placeholder="产品名称" ng-model="CPname">
        产品价格:
        <select ng-model="SXqj">
            <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="id">排序方式</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>
    </p>
    <table border="1" cellpadding="10" cellspacing="0" style="margin-bottom: 20px;" class="tab">
         <thead>
            <tr style="background-color: #969fff">
                <th><input type="checkbox" ng-model="all" ng-click="ALL()"></th>
                <th>产品编号</th>
                <th>产品名称</th>
                <th>产品价格</th>
                <th>操作</th>
            </tr>
         </thead>
        <tbody>
            <tr ng-repeat="d in data | filter:{'name':CPname} | orderBy:PXfs" ng-if="isShow(d.price)">
                <th><input type="checkbox" ng-model="d.state" ng-click="FX()"></th>
                <td>{{d.id}}</td>
                <td>{{d.name}}</td>
                <td>{{d.price | currency:("￥:")}}</td>
                <td><button ng-click="DXsc(d.name)">删除</button>&nbsp;<button ng-click="XG(d.id)">修改</button></td>
            </tr>
        </tbody>
    </table>
    <button ng-click="add()">添加新产品</button>
    <div style="margin-top: 20px; width: 300px; border: 1px solid #f00" ng-show="flag">
        <h3>修改商品界面</h3>
        <span>商品编号:</span><input type="text" placeholder={{XGbh}} disabled="disabled" ng-model="XGbh"><br><br>
        <span>商品名称:</span><input type="text" placeholder={{XGmc}} ng-model="XGmc1"><br><br>
        <span>商品价格:</span><input type="text" placeholder={{XGjg}} ng-model="XGjg1"><br><br>
        <button style="margin-bottom: 20px" ng-click="Tj()">提交</button>
    </div>
    <div style="margin-top: 20px; width: 300px; border: 1px solid #f00" ng-show="flag1">
        <h3>添加商品界面</h3>
        <span>商品编号:</span><input type="text" ng-model="TJbh"><br><br>
        <span>商品名称:</span><input type="text" ng-model="TJmc"><br><br>
        <span>商品价格:</span><input type="text" ng-model="TJjg"><br><br>
        <button style="margin-bottom: 20px" ng-click="TJ()">提交</button>
    </div>
</center>
</body>
</html>
污鸦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
购物车(JS代码)
尼古拉斯.张飞的博客
05-29 4231
购物车           h1 {         text-align:center;       }       table {         margin:0 auto;         width:60%;         border:2px solid #aaa;         border-collapse:collapse;       }
angularjs实现简单的购物车功能
10-19
主要为大家详细介绍了angularjs实现简单的购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJS购物车商品数量加减计算代码
01-03
AngularJS购物车商品数量加减计算代码 不错的AngularJS例子
angularJS 购物车练习
xuanwuziyou的专栏
10-12 1321
本文是一个简单的购物车练习，功能包括增加、减少某商品的数量，从而影响该商品的购买总价以及所有商品的购买总价；从购物车内移除一项商品；清空购物车。 页面效果如图：     若使用js或jquery来实现这个页面，会需要绑定很多事件，如减少数量按钮事件，增加数量按钮事件，移除某项商品事件，清空购物车事件，而这些事件之中很多代码很重复，比如计算某项商品的总购买价，计算所有商品的购买总价，不胜
Angularjs 完成购物车
Yanghongli_的博客
09-20 339
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'shopcar.jsp' start
angularJS购物车2
SuperZhongyulong的博客
03-28 266
&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.m
AngularJS实现购物车
weixin_34153893的博客
06-06 67
用AngularJS实现购物车，具体代码如下：<!DOCTYPEhtml> <htmlng-app="app"> <head> <metacharset="utf-8"> <linkhref="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstr...
AngularJS购物车商品数量加减计算特效代码
03-20
在本文中，我们将深入探讨如何使用AngularJS实现一个购物车商品数量加减计算的特效代码。AngularJS，作为一款强大的前端MVC框架，为开发者提供了丰富的功能和便捷的数据绑定机制，使得构建动态交互的Web应用变得简单...
AngularJs 终极购物车(实例讲解)
10-19
下面小编就为大家带来一篇AngularJs 终极购物车的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
angularjs 购物车
SuperZhongyulong的博客
03-27 212
&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购物车删除和计算总金额
XiaoZhuang__的博客
12-12 351
日考                                                                   商品名称                 数量                 单价                 小计                 操作                                     
AngularJS购物车功能增加/删除/价格的计算
ztz的博客
10-24 322
html> html> head> meta charset="UTF-8"> title>AngularJS购物车功能增加/删除/价格的计算title> script type="text/javascript" src="AngularJS/angular.js" >script> script> var app = angular.module
angularjs购物车功能（全）包含 （修改，添加等功能）
全栈若城,专注知识分享
10-19 1424
先上效果图： css代码较为简单 这里的css主要是为了修改模拟窗口，和添加数据模拟窗口： .shop{ width: 500px; height: 300px; background: #E5E5E5; margin: 0 auto; } .shop p{ width: 450px; height: 30px; margin: 0 auto;...
angularJS--购物车实现全选/取消全选
IT666DHW的博客
10-24 883
html> html lang="en" ng-app="testMo"> head> meta charset="UTF-8"> title>title> link rel="stylesheet" href="css/bootstrap.css"> style> .div1{ margin: 20px; }
计算机三级PC专业技术.doc
07-18
计算机
“人力资源+大数据+薪酬报告+涨薪调薪”
最新发布
07-18
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
健康产业商业模式研究大纲-医疗器械-迪安诊断.docx
07-18
健康产业商业模式研究大纲-医疗器械-迪安诊断
计算机期末考试题.doc
07-18
计算机
使用AngularJS制作一个购物车
06-08
使用AngularJS制作一个购物车需要以下步骤： 1. 定义一个AngularJS app模块和controller控制器。 ```javascript var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { // 初始化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值