购物车（angularJS）
来源：互联网 发布：javascript获取子元素 编辑：程序博客网 时间：2024/06/06 12:39
<!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> <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
- 购物车（angularjs）
- 购物车（angularJS）
- （angularjs ）购物车案例
- 【AngularJS】购物车实例
- AngularJS 购物车实例
- AngularJS-购物车Demo
- angularJS 购物车练习
- 购物车AngularJs
- angularJs购物车
- angularjs bootstrap 购物车
- angularjs完成购物车
- AngularJS购物车代码
- 购物车angularJS
- Angularjs 完成购物车
- AngularJs购物车实现
- angularJs 购物车
- angularjs购物车
- AngularJs购物车代码。
- JavaScript对话框
- bug or function in photo view :fancybox
- 11g降到10g方法
- 理解stm32 bit-band映射公式【转】
- node.js+mysql实现用户登陆验证
- 购物车（angularJS）
- 购物车（ionic）
- 银行账户操作的简单模型
- 关于LD_PRELOAD在Android API HOOK中的应用
- 【Scikit-Learn 中文文档】支持向量机
- 福州省赛 二分
- volatile关键字解析
- shopping
- TCP为什么需要3次握手与4次挥手
