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前端框架实现全选/全不选操作的时候可以将相对应记录的数据,直接放入到集合中,以便后续操作!