1. 程式人生 > >AnaularJs的一鍵全選和全不選,且將選中的資料放入到陣列中

AnaularJs的一鍵全選和全不選,且將選中的資料放入到陣列中

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前端框架實現全選/全不選操作的時候可以將相對應記錄的資料,直接放入到集合中,以便後續操作!