angular实现页面数据动态加载

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

再上代码及相关解释：

HTML页面关键代码：

<div ng-app ng-controller="UserSearchCtrl">
<ul data-role="listview" data-inset="true" data-corners="false" data-split-icon="phone" >
<li ng-repeat="row in rows">
<a href="#" ng-click="select( $index )">
<h2>{{$index+1}}.{{row.STAFF_NAME}}</h2>
<p>工号：{{row.STAFF_CODE}} </p>
<p>联系电话：{{row.RELA_MOBILE}}</p>
<p>状态：{{row.STATE}}</p>
</a>
<a href="tel:{{row.RELA_MOBILE}}"></a>
</li>
</ul>
<input type="button" value="{{msg}} >共{{total}} 条数据" id="nextPage" ng-click="nextPage()" />
</div>
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");

}