Angular中 判断ng-repeat 是否渲染结束与checkbox翻页的状态保存

在项目中有一个弹出框里面是数据列表，需要用户在多个翻页中选择（一条或多条都可以）。点击确认后，把选择的数据带回后面的页面显示。

实现该功能，存在的问题：在翻页后保存checkbox的状态。

思路： 不知道什么原因，在第一页选择后 第二页的同一个位置的checkbox也会有checked状态。希望能在翻页后页面渲染完成时把 checkbox的状态重置，再去根据点击翻页时保存的被选条。去动态判断checked 的状态。

首先，实现 “ 翻页后页面渲染完成时“ ，利用angular指令监听ng-repeat渲染完成后执行脚本。

第一步自定义指令

         app.directive("repeatFinish",function ($timeout) {
    return function ($scope, $element,$attrs) {
        if($scope.$last==true){
       
            $timeout(function() {
                $scope.$emit('ngRepeatFinished');
            });
        }
    }
})

第二步 在对应的controller中使用

app.controller("repeatCtrl",["$scope",function($scope){
	$scope.$on('ngRepeatFinished', function() {					
                                            $scope.$watch($scope.pageList, function() {
				            // 每次翻页pageList都会发生变化,监听该变量,并在这里写入需要的函数
					})
		})	
        }])

第三步 在使用ng-repeat的页面中引入

    <tr repeat-finish ng-controller="repeatCtrl" ng-repeat="list in pageList  track by $index">
              ......  
    </tr>

以上是监听ng-repeat是否渲染结束

其次，在翻页时存储被选中的数据，在翻页中调用此函数，$scope.checkList保存已被选中的checkbox

 $scope.checkList = [];
  //该功能中的input checkbox 的id为数据中的bosID值 值唯一   
// $scope.bosIdCheck 是数组对象  保存所有的checkbox id
	$scope.checkBox=function(){
		for(var i=0;i<$scope.bosIdCheck.length;i++){		
                      if($("#"+$scope.bosIdCheck[i]).prop("checked")){
				$scope.checkList.push($scope.bosIdCheck[i]);
			}
		}	
	}

最后 ，就是在来回翻页中  将对应页面的对应选中状态回显。$scope.checkBoxVal为全局变量。选择结束点击确认带回数据时。可将该变量作为参数，调用接口。在页面上显示。  if函数整体可以封装一下。在点击确认按钮是

app.controller("repeatCtrl",["$scope",function($scope){
    $scope.setChecked=function(){

       if($scope.checkList.length!==0){			
		       for(var i=0;i<$scope.checkList.length;i++){
                                //去重
			 if($scope.checkBoxVal.indexOf($scope.checkList[i])<0){
                                $scope.checkBoxVal.push($scope.checkPList[i]);
			                        }
		                              }
		          for(var i=0;i<$scope.checkBoxVal.length;i++){
			          $("#"+$scope.checkBoxVal[i]).prop("checked",true);
		                        }
}	

$scope.$on('ngRepeatFinished', function() {$scope.$watch($scope.pagingList, function() { //清掉所有 checked 不清掉的话 前一页的checked 后一页同一个位置的checkbox也会有checked$(".table tbody input[type='checkbox']").prop("checked",false); })}) }])
对于angular的使用还不是很熟悉，还有很多可以赶紧的地方，会在修改后更新。