angularjs購物車，排序，篩選，全選，刪除，確認是否刪除
阿新 • • 發佈：2019-01-07
<html lang="en"> <head> <meta charset="UTF-8"> <title>第三週週考</title> <script src="angular1.4.6.min.js"></script> <script src="jquery-3.2.1.js"></script> <script> var app=angular.module("myApp",[]); app.controller("myController",function($scope){ $scope.user=[ {checked:false,id:"1324",name:"ipad",price:"3400.00",num:"10",item:"0"}, {checked:false,id:"4567",name:"aphone",price:"6400.00",num:"100",item:"1"}, {checked:false,id:"3546",name:"mypad",price:"4400.00",num:"20",item:"2"}, {checked:false,id:"1987",name:"zpad",price:"8400.00",num:"120",item:"3"} ] $scope.nc=function(index){ if($scope.user[index].checked==false){ alert("請選中後刪除"); }else{ if(confirm("確認刪除")){ $scope.user.splice(index,1) } } } $scope.qs=function(){ for(var i=0;i<$scope.user.length;i++){ if($scope.user[i].checked==false){ alert("請選中後刪除"); }else{ if(confirm("確認全刪")){ $scope.user=[]; } } } } $scope.selectAllClick=function(sa){ for(var i=0;i<$scope.user.length;i++){ $scope.user[i].checked=sa; } } $scope.echoChange=function(ck,id){ if(ck==false){ $scope.user[id].checked=true; }else{ $scope.user[id].checked=false; } } $scope.togg=function(tit){ $scope.title=tit; $scope.desc = !$scope.desc; } }) </script> <style> .d{ width:100%; height: 50px; background: gainsboro; } td{ background: white; } </style> </head> <body ng-app="myApp" ng-controller="myController"> <div class="d"> <input type="text"style="float: left;line-height: 30px" ng-model="serch"> <button style="float: right;line-height: 30px" ng-click="qs()">批量刪除</button> </div> <table style="width: 100%; height: 400px; background: gainsboro;margin-top: 40px" cellspacing="1px"> <tr> <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"></td> <td ng-click="togg('id')">商品編號</td> <td ng-click="togg('name')">商品名稱</td> <td ng-click="togg('price')">商品價格</td> <td ng-click="togg('num')">商品庫存</td> <td>資料操作</td> </tr> <tr ng-repeat="u in user|filter:serch|orderBy:title:desc"> <td><input type="checkbox" ng-checked="u.checked"ng-click="echoChange(u.checked,$index)"></td> <td>{{u.id}}</td> <td>{{u.name}}</td> <td>￥：{{u.price}}</td> <td>{{u.num}}</td> <td><button ng-click="nc($index)">刪除</button></td> </tr> </table> </body> </html>