购物车4 增删改插

来源：互联网发布：自动谱曲软件下载编辑：程序博客网时间：2024/05/18 02:11

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /**{ margin: auto; padding: 0; }*/ body{ text-align: center; margin: 50px auto; } /*table { margin-top: 30px; }*/ .btn { background: cornflowerblue; width: 100px; height: 50px; } tr:nth-child(2n){ background: #666; } </style> <script type="text/javascript" src="js/angular.js" ></script> <script> var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.student = [{ "id":80, "name":"iPhone", "price":5400 },{ "id":290, "name":"iPad", "price":1420 },{ "id":500, "name":"iPad air", "price":2340 },{ "id":910, "name":"imac", "price":15400 },{ "id":1200, "name":"iPad mini", "price":2200 }] $scope.px = ""; // $scope.sc = function(name){ // if (window.confirm("确定删除？")) { // for (a in $scope.student) { // if (name == $scope.student[a].name) { // $scope.student.splice(a,1); // } // } // } // } //删除 $scope.sc = function(name){ if(window.confirm("确定删除？")){ for (a in $scope.student) { if(name == $scope.student[a].name){ $scope.student.splice(a,1); } } } } //修改 $scope.xg = function(price){ for (index in $scope.student) { if (price == $scope.student[index].price) { var result = parseInt(window.prompt("清输入要修改的价格",price)); if (result<0) { alert("输入有误，请重新输入"); } else{ if (window.confirm("确定要将"+$scope.student[index].name+"的价格更改为:"+result+"吗？")) { $scope.student[index].price = result; } } } else{ } } } //全选，全不选 $scope.selectAll = false; $scope.selectAllFun = function(){ if ($scope.selectAll) { for (index in $scope.student) { $scope.student[index].state = true; } } else{ for (index in $scope.student) { $scope.student[index].state = false; } } } //反选 $scope.checkSelecetAll = function(){ var flag = false; for (index in $scope.student) { if (!$scope.student[index].state) { flag = true; } } if (flag) { $scope.selectAll = false; } else{ $scope.selectAll = true; } } //批量删除 $scope.plsc = function(){ var is = []; for (index in $scope.student) { if ($scope.student[index].state) { is.push($scope.student[index]); } } for (index in is) { var name = is[index].name; for (index2 in $scope.student) { if (name == $scope.student[index2].name) { $scope.student.splice(index2,1); } } } } //添加商品 $scope.isShow = false; $scope.isShow2 = false; $scope.showForm = function() { if($scope.isShow) { $scope.isShow = false; } else { $scope.isShow = true; } } //添加 $scope.submit = function() { $scope.errorArr = []; //判断id是否为空 if($scope.newId == null || $scope.newId == "") { $scope.errorArr.push("ID不能为空"); } else if(isNaN($scope.newId)) { $scope.errorArr.push("ID必须是数字"); } if($scope.newName == null || $scope.newName == "") { $scope.errorArr.push("产品名称不能为空"); } else { for(index in $scope.shops) { if($scope.student[index].name == $scope.newName) { $scope.errorArr.push("产品名称不能重复"); } } } if($scope.newPrice == null || $scope.newPrice == "") { $scope.errorArr.push("价格不能为空"); } else if(isNaN($scope.newPrice)) { $scope.errorArr.push("价格必须是数字"); } if($scope.errorArr.length > 0) { //显示列表 $scope.isShow2 = true; } else { $scope.isShow2 = false; //添加商品 var newShop = { id: parseInt($scope.newId), name: $scope.newName, price: parseInt($scope.newPrice), num:1, state: false }; $scope.student.push(newShop); $scope.isShow = false; } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <h3>购物车</h3> 产品名称：<input type="text" placeholder="产品名称" ng-model="cx"/> 排序：<select ng-model="px"> <option value="">排序方法</option>s <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"> <tr> <th><inputtype="checkbox"ng-model="selectAll"ng-click="selectAllFun()" /></th> <th>产品编号</th> <th>产品名称</th> <th>产品价格</th> <th>操作</th> </tr> <tr ng-repeat="p in student | filter:{name:cx} | orderBy:px"> <td><inputtype="checkbox"ng-model="p.state"ng-click="checkSelecetAll()"/></td> <td>{{p.id}}</td> <td>{{p.name}}</td> <td>{{p.price}}</td> <td> <button ng-click="sc(p.name)">删除</button> <button ng-click="xg(p.price)">修改</button> </td> </tr> </table><br /> <button ng-click="showForm()">添加商品</button><br /><br /> <fieldset ng-show="isShow" id="" style="width: 400px;"> <legend>添加商品</legend><br /> <form> 产品编号：<input type="text" ng-model="newId" /><br /><br /> 产品名称： <input type="text" ng-model="newName" /><br /><br /> 产品价格： <input type="text" ng-model="newPrice" /><br /><br /> <ul ng-show="isShow2" style="width: 200px; background-color: #f89;"> <li ng-repeat="error in errorArr">{{error}}</li> </ul> <input ng-click="submit()" type="button" value="添加" /> </form> </fieldset> </center> </body> </html>

阅读全文

0 0