angularJs購物車--（賣藥）
阿新 • • 發佈：2018-12-21
效果圖：
css程式碼：
<style> div{ width: 400px; height:300px ; background: #ccc; } div p{ width: 300px; height: 30px; margin: 0 auto; margin-top: 20px; } div input{ width: 200px; height: 30px; } div button{ display: block; margin: 0 auto; margin-top: 20px; width: 100px; height: 30px; } </style>
html程式碼：
<body ng-app="myApp" ng-controller="myCtrl"> <button ng-click="qx()">全選</button> <button ng-click="fx()">反選</button> <button ng-click="qbx()">全不選</button> <button ng-click="plsc()">批量刪除</button> <button ng-click="allDel()">清空購物車</button> <button ng-click="add()">新增</button> <button ng-click="dx(price)">倒序</button> <input type="text" placeholder="請輸入名稱" ng-model="search" /> <table border="1" width="100%" > <tr> <th>選項 </th> <th>名稱</th> <th>產地</th> <th>數量</th> <th>生產時間</th> <th>單價</th> <th>小計</th> <th>操作</th> </tr> <tr ng-repeat="x in goods | filter:{gname:search} | orderBy:order+orderType"> <td><input type="checkbox" ng-model="x.ck" /> </td> <td>{{x.gname}}</td> <td>{{x.address}}</td> <td> <input type="button" value="-" ng-click="jian($index)" /> <span>{{x.num}}</span> <input type="button" value="+" ng-click="jia($index)" /> </td> <td> {{x.regDate|date:'yyyy-MM-dd hh:mm:ss'}} </td> <td> {{x.price | currency :"￥"}} </td> <td> {{x.num * x.price | currency:"￥"}} </td> <td> <input type="button" value="刪除" ng-click="del($index)" /> <input type="button" value="修改" ng-click="upda($index)" /> </td> </tr> <tr> <td colspan="8"> <span>總價</span> <span ng-bind="allSum()|currency:'￥'"></span> </td> </tr> </table> <!--新增操作--> <div ng-show="addShow" > <p>名稱 ： <input ng-model="name" type="text" placeholder="請輸入名稱" /></p> <p>產地 ： <input ng-model="addre" type="text" placeholder="請輸入產地" /></p> <p>價格 ： <input ng-model="prices" type="text" placeholder="請輸入價格" /></p> <button ng-click="trueAdd()">確認新增</button> </div> <!--修改操作--> <div ng-show="updShow" > <p>名稱 ： <input ng-model="obj.name" type="text" placeholder="請輸入名稱" /></p> <p>產地 ： <input ng-model="obj.addre" type="text" placeholder="請輸入產地" /></p> <p>價格 ： <input ng-model="obj.prices" type="text" placeholder="請輸入價格" /></p> <button ng-click="trueUpd()">確認修改</button> </div> </body>
angular程式碼：
var vm=angular.module('myApp',[]) vm.controller('myCtrl',function($scope,$http){ //如果需要呼叫外部資料，在scope 後面加上 http 服務 $http.get("yao.json").then(function(res){ $scope.goods=res.data //修改資料 //定義一個空物件 接受臨時資料 $scope.obj={} //定義一個索引值 var idx=-1 $scope.upda=function($index){ $scope.updShow=true //將goods裡面對應的資料放到obj中 $scope.obj.name=$scope.goods[$index].gname $scope.obj.addre=$scope.goods[$index].address $scope.obj.prices=$scope.goods[$index].price idx=$index } //資料修改 $scope.trueUpd=function(){ $scope.goods[idx].gname=$scope.obj.name $scope.goods[idx].address=$scope.obj.addre $scope.goods[idx].price=$scope.obj.prices $scope.updShow=false } //新增 $scope.add=function(){ $scope.addShow=true } //定義當前時間 // var theTime=new Date().toLocaleTimeString() //確認新增邏輯實現 $scope.trueAdd=function(){ //賦值操作 var name= $scope.name var addre= $scope.addre var prices= $scope.prices //新增操作 $scope.goods.push({ gname:name, address:addre, price:prices, num:1, regDate:1371120093221 }) //資料清空 $scope.name="" $scope.addre ="" $scope.prices ="" $scope.addShow=false } //總價 $scope.allSum=function(){ var allProce=0 for (var i=0 ;i<$scope.goods.length;i++) { allProce+=$scope.goods[i].price * $scope.goods[i].num } return allProce } //倒序 $scope.order="" $scope.dx=function(type){ $scope.orderType=type if ($scope.order=="") { $scope.order="-" } else{ $scope.order="" } } //資料加減 //加 $scope.jia=function(index){ $scope.goods[index].num++ } //減 $scope.jian=function(index){ if ($scope.goods[index].num>1) { $scope.goods[index].num-- } else{ $scope.goods.splice(index,1) } } //清空購物車 $scope.allDel=function(){ if ($scope.goods.length==0) { alert("購物車為空") } else{ $scope.goods=[] } } //批量刪除 $scope.plsc=function(){ if (confirm("確定要刪除嗎？？")) { for (var i=0 ; i<$scope.goods.length ; i++) { if ($scope.goods[i].ck==true) { $scope.goods.splice(i,1) i-- } } } } //單個刪除 $scope.del=function(index){ $scope.goods.splice(index,1) } //全選 $scope.qx=function(){ for (var i=0 ; i<$scope.goods.length ;i++) { var x=$scope.goods[i] x.ck=true } } //反選 $scope.fx=function(){ for (var i=0 ; i<$scope.goods.length ;i++) { var x=$scope.goods[i] if (x.ck==x.ck) { x.ck=!x.ck } } } //全不選 $scope.qbx=function(){ for (var i=0 ; i<$scope.goods.length ;i++) { var x=$scope.goods[i] if (x.ck==x.ck) { x.ck=false } } } }) })
ok！！！