AnaularJs的一鍵全選和全不選,且將選中的資料放入到陣列中
阿新 • • 發佈:2018-12-15
1.Js程式碼
//全選和全不全 $scope.box1 = function() { var aa = $scope.checkAll; if(aa == false) { for(var i = 0; i < $scope.list.length; i++) { $scope.list[i].ckx = true; $scope.selectIds.push($scope.list[i].order.orderId); } } else { for(var i = 0; i < $scope.list.length; i++) { $scope.list[i].ckx = false; } $scope.selectIds=[]; } }
2.HTML程式碼
<div class="orders"> <div class="choose-order"> <label > <input id="selectAll" type="checkbox" ng-model="checkAll" ng-click="box1()"><span>全選</span> </label> <a href="pay.html#?type='all'&ids={{selectIds}}" class="sui-btn btn-info btn-bordered hepay-btn">合併付款</a> <div class="sui-pagination pagination-large top-pages"> <ul> <li class="prev {{isTopPage()?'disabled':''}}"><a href="#">上一頁</a></li> <li class="next {{isEndPage()?'disabled':''}}"><a href="#">下一頁</a></li> </ul> </div> </div> <div ng-repeat="entity in list"> <div class="choose-title"> <label > <input id="checkbox" ng-model="entity.ckx" type="checkbox" ng-click="updateSelection($event,entity.order.orderId)" ><span>{{entity.order.createTime}} 訂單編號:{{entity.order.orderId}} 店鋪:{{entity.sellername}}<a>和我聯絡</a></span> </label> <a class="sui-btn btn-info share-btn">分享</a> </div> <table class="sui-table table-bordered order-datatable"> <tbody> <tr ng-repeat="item in entity.orderItemList"> <td width="35%"> <div class="typographic"><img width="50px" height="50px" ng-src="{{item.picPath}}" /> <a href="#" class="block-text">{{item.title}}</a> <span class="guige">規格:{{entity[item.id]}}</span> </div> </td> <td width="5%" class="center"> <ul class="unstyled"> <!-- <li class="o-price">¥599.00</li>--> <li>¥{{item.price.toFixed(2)}}</li> </ul> </td> <td width="5%" class="center">{{item.num}}</td> <!--<td width="8%" class="center"></td>--> <td width="10%" class="center"> <ul class="unstyled"> <li>¥{{item.price.toFixed(2)}}</li> <li>(含運費:¥{{entity.order.totalFee==null?0.00:entity.order.totalFee.toFixed(2)}})</li> </ul> </td> <td width="10%" class="center"> <ul class="unstyled"> <li>{{orderStatus[entity.order.status]}}</li> <li><a href="home-orderDetail.html#?orderId={{entity.order.orderId}}" class="btn">訂單詳情 </a></li> </ul> </td> <td width="10%" class="center"> <ul class="unstyled" > <li><a href="pay.html#?id={{entity.order.orderId}}" class="sui-btn btn-info">立即付款</a></li> <li><a href="#">取消訂單</a></li> </ul> </td> </tr> </tr> </tbody> </table> </div> </div>
3.總結
本例項中是將每一個訂單id(order.order.id)放入到集合中,以便全選以後,直接合並支付操作.
本例項最大的特點是:
利用angularJs前端框架實現全選/全不選操作的時候可以將相對應記錄的資料,直接放入到集合中,以便後續操作!