<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车</title> <script type="text/javascript" src="js/Angular/angular.js"></script> <script> var app=angular.module("myApp",[]); var data=[{ id:80, name:"iPhone", price:5400, state:false, },{ id:290, name:"ipad", price:1420, state:false, },{ id:500, name:"ipad air", price:2340, state:false, },{ id:910, name:"imac", price:15400, state:false, },{ id:1200, name:"ipad mini", price:2200, state:false, }] app.controller("myCtrl",function($scope){ $scope.data=data; $scope.order1='name'; $scope.order2='-'; $scope.sel="排序方式" if($scope.sel=="排序方式"){ $scope.sel=""; }; $scope.dian=function(dians){ $scope.order1=dians; if($scope.order2==""){ $scope.order2="-"; }else{ $scope.order2=""; } }; //添加 $scope.add = function(){ if($scope.id == undefined || $scope.id == ""){ alert("编号不能为空!"); return; } if($scope.name == undefined || $scope.name == ""){ alert("商品名称不能为空!"); return; } if($scope.price == undefined || $scope.price == ""){ alert("价格不能为空!"); return; } if (!/^\d+$/.test($scope.id)) { alert("id必须是数字!"); return; } if (!/^\d+$/.test($scope.price)) { alert("价格必须是数字!"); return; } $scope.data.push({ id:$scope.id, name:$scope.name, price:$scope.price, count:$scope.count, }); $scope.id=""; $scope.name=""; $scope.price=""; $scope.count=""; }; $scope.addUserIsShow=false; $scope.addUser = function(){ if($scope.addUserIsShow){ $scope.addUserIsShow = false; }else{ $scope.addUserIsShow=true; } }; $scope.delete=function(name){ if(name!=""){ if(confirm("确认要删除"+name+"商品吗?")){ var p; for(index in $scope.data){ p=$scope.data[index]; if(p.name==name){ $scope.data.splice(index,1); } } } } } //修改内容 $scope.editUserIsShow =false; $scope.editUser = function (index) { var item = $scope.data[index]; $scope.e_id = item.id; $scope.e_name = ""; $scope.e_price = ""; $scope.index = index; if($scope.editUserIsShow){ $scope.editUserIsShow=false; }else{ $scope.editUserIsShow=true; } }; $scope.edit = function () { if($scope.e_id == undefined || $scope.e_id == ""){ alert("id不能为空!"); return; } if($scope.e_name == undefined || $scope.e_name == ""){ alert("商品名不能为空!"); return; } if($scope.e_price == undefined || $scope.e_price == ""){ alert("价格不能为空!"); return; } if (!/^\d+$/.test($scope.e_id)) { alert("id号必须是数字!"); return; } if (!/^\d+$/.test($scope.e_price)) { alert("价格必须是数字!"); return; } $scope.data[$scope.index].name = $scope.e_name; $scope.data[$scope.index].price = $scope.e_price; $scope.data[$scope.index].count = $scope.e_count; //$scope.editUserIsShow = false; }; //全选、全不选 $scope.selectAll = false; $scope.selectAllFun = function() { if($scope.selectAll) { for(index in $scope.data) { $scope.data[index].state = true; } } else { for(index in $scope.data) { $scope.data[index].state = false; } } } //反选 $scope.checkSelAll = function() { var flag = false; for(index in $scope.data) { if(!$scope.data[index].state) { //满足条件 flag = true; } } if(flag) { $scope.selectAll = false; } else { $scope.selectAll = true; } } //批量删除 $scope.AllDelete=function(){ var selArr=[]; for(index in $scope.data){ if($scope.data[index].state){ selArr.push($scope.data[index].name); } } if(selArr.length>0){ if(window.confirm("确定要删除吗?")){ for(index1 in selArr){ for(index2 in $scope.data){ if(selArr[index1]==$scope.data[index2].name){ $scope.data.splice(index2,1); } } } } }else{ alert("请选择"); } } //全部删除 $scope.removeAll = function () { if($scope.data.length==0){ alert('你的购物车为空'); }else{ var b = confirm("确认全部删除"); $scope.data=[]; } }; }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <h1>购物车</h1> 产品名称:<input type="text" placeholder="产品名称" ng-model="search"/> 排序: <select ng-model="sel" > <option value="">排序方式</option> <option value="id">id正序</option> <option value="-id">id逆序</option> <option value="price">价格正序</option> <option value="-price">价格逆序</option> </select><br/><br/> <button ng-click="addUser()" style="margin-left: 30px;">添加产品</button> <button ng-click="AllDelete()" style="margin-left: 30px;">批量删除</button> <button ng-click="removeAll()" style="margin-left: 30px;">全部删除</button><br/><br/> <table border="1" cellpadding="10" cellspacing="0"> <thead> <tr> <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td> <th ng-click="dian('id')">产品编号</th> <th ng-click="dian('name')">产品名称</th> <th ng-click="dian('price')">产品价格</th> <th align="center">操作</th> </tr> </thead> <tbody> <tr ng-repeat="d in data | filter:{name:search} | orderBy:(order2+order1) |orderBy:sel" > <td><input type="checkbox" ng-model="d.state" ng-click="checkSelAll()"/></td> <td>{{d.id}}</td> <td>{{d.name}}</td> <td>{{d.price | currency:'RMB¥'}}</td> <td><input ng-click="delete(d.name)" type="button"value="删除"/><input type="button" value="修改" ng-click="editUser($index)"/></td> </tr> </tbody> </table> <div ng-show="addUserIsShow"> <table border="1" cellpadding="10" cellspacing="0"> <tr> <td>产品编号</td> <td><input type="text" ng-model="id"/></td> </tr> <tr> <td>产品名称</td> <td><input type="text" ng-model="name"/></td> </tr> <tr> <td>产品价格</td> <td><input type="text" ng-model="price"/></td> </tr> <tr> <td colspan="2" align="center"><button ng-click="add()">添加</button> </td> </tr> </table> </div> <div ng-show="editUserIsShow"> <table border="1" cellpadding="10" cellspacing="0"> <tr> <td>产品编号</td> <td><input type="text" ng-model="e_id"/></td> </tr> <tr> <td>产品名称</td> <td><input type="text" ng-model="e_name"/></td> </tr> <tr> <td>产品价格</td> <td><input type="text" ng-model="e_price"/></td> </tr> <tr> <td colspan="2" align="center"><button ng-click="edit()">提交</button> </td> </tr> </table> </div> </center> </body> </html>
jquery增删改查
最新推荐文章于 2024-08-07 23:51:34 发布