angular实现页面数据动态加载

这边文章总结使用ANGULAR实现页面动态加载效果，算是使用JS MVC框架的一个演练。先上效果图：

再上代码及相关解释：

HTML页面关键代码：

		

				

					

						
							
{{$index+1}}.{{row.STAFF_NAME}}
							
工号：{{row.STAFF_CODE}} 
							
联系电话：{{row.RELA_MOBILE}}
							
状态：{{row.STATE}}
							
						
					
				
				 
			

ng-app  ng-controller="UserSearchCtrl" 的作用定义ANGULAR app 及 Control的作用范围

JS代码：

UserSearchCtrl函数对应 ng-controller

function UserSearchCtrl($scope ) {

	  $scope.url= "${ctx}/sqlservice/pagequery.json?sqlKey=admin.staffInfoList";
	  $scope.staffName ="STAFF";
	  // 点击页面搜索按钮后
	  $scope.params =  {staffName:'${param.staffName}',lanId :'${param.lanId}'};
	  AngularPage.initPagination($scope);
	  AngularPage.nextPage($scope );
	  if($scope.loadCompleted){
		  disableBtn('#nextPage') ;
	  }

	  //点击加载更多...
	  $scope.nextPage= function() { 
		  AngularPage.nextPage($scope );
		  if($scope.loadCompleted){
			  disableBtn('#nextPage') ;
		  }
	  };

}

AngularPage 封装了相关加载数据代码：

URL 返回数据格式举例如下： {  "total" : 121212, "rows":[ {CODE:'1212'},{CODE:'1212'}] }

 var AngularPage ={};
AngularPage.nextPage = function ($scope){
 $scope.curPage =  $scope.curPage + 1 ;
 $scope.params.page = $scope.curPage ;
 if($scope.loadCompleted){
 return ;
 }


// depend on jquery ajax
  $scope.msg  =  "加载中.....";
  $.ajax({ url: $scope.url, data:$scope.params , type:$scope.method, async: false, dataType :"json" ,
 success: function(data, status) {
     $scope.status = status;
     $scope.total = data.total;
 if($scope.rows.length < $scope.total){
 $scope.msg  =  "点击加载更多.....";
 $scope.rows = $scope.rows.concat( data.rows );
 }
 if($scope.rows.length >= $scope.total){
 $scope.loadCompleted = true ;
 console.log( "加载完毕!" );
 $scope.msg = "加载完毕!";
 }
     },
     error : function(data, status) {
       $scope.data = data || "Request failed";
       $scope.msg = "加载失败!";
       $scope.status = status;
 }
  });


};


AngularPage.initPagination = function ($scope){
 $scope.method = "POST" ;
 $scope.curPage = 0; // 当前页码
 $scope.params.rows = 20; //每页记录条数
 $scope.total = 0;  //总记录条数
 $scope.rows =[] ;  //页面加载的结果集
 $scope.msg="点击加载更多.....";
 $scope.loadCompleted = false ;
};


// depend on serializeObject
AngularPage.initParam = function ($scope,jqElement){
 var formParams = jqElement.serializeObject() ;
 angular.extend($scope.params, formParams);
};


//jqm disableBtn
function disableBtn(btnId){
 $(btnId).attr("disabled","disabled");
 $(btnId).parent().addClass("ui-state-disabled");
}