AngularJS------分页

我们要知道使用AngularJS的文件结构，以及每个文件存放的内容，

html页面：AngularJS的标签或者属性（AngularJS在标签中的属性和普通js的属性是不同的，有的属性的AngularJS特有的），写方法

controller.js:存放实际js方法，接收html页面传递的方法参数以及实现js逻辑

service.js:存放请求（post，get）到后台的路径

分页：

html页面：

<tm-pagination conf="paginationConf"></tm-pagination>

baseController.js:

// 分页的配置的信息
	$scope.paginationConf = {
	         currentPage: 1, // 当前页数
		 totalItems: 0, // 总记录数
		 itemsPerPage: 5, // 每页显示多少条记录
		 perPageOptions: [5,10, 20, 30, 40, 50],// 显示多少条下拉列表
		 onChange: function(){ // 当页码、每页显示多少条下拉列表发生变化的时候，自动触发了
			$scope.reloadList();// 重新加载列表
		 }
	}; 

	$scope.reloadList = function(){
		$scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
	}

再去service层找search：

service.js:

//搜索
this.search=function(page,rows,searchEntity){
  return $http.post('../typeTemplate/search.do?page='+page+"&rows="+rows, searchEntity);
} 

如果在分页查询的时候，数据库表存放的是json格式的数据，而要求在页面展示的是去其中的一个属性，要求用AngularJS完成。例如如下需求：

数据库中的数据格式：

页面展示的数据：

解决方案：

html页面：

<tbody>
      <tr ng-repeat="entity in list">
<td><input  type="checkbox" ng-click="updateSelection($event,entity.id)"></td>	                              
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{jsonToString(entity.brandIds,'text')}}</td>	

<td>{{jsonToString(entity.specIds,'text')}}</td>	<td>{{jsonToString(entity.customAttributeItems,'text')}}</td>		                                                                  
<td class="text-center">                                           
      <button type="button" class="btn bg-olive btn-xs" ng-click="findOne(entity.id)" data-toggle="modal" data-target="#editModal" >修改</button>                                           
</td>
      </tr>
</tbody>

在html页面中通过jsonToString根据key的名字获取key对应的值

在baseController.js中：

// 定义方法：获取JSON字符串中的某个key对应值的集合[{id:1,text:网络}]  List<Map>
	$scope.jsonToString = function(jsonStr,key){
		// 将字符串转成JSOn:
		var jsonObj = JSON.parse(jsonStr);
		
		var value = "";
		for(var i=0;i<jsonObj.length;i++){
			
			if(i>0){
				value += ",";
			}
			
			value += jsonObj[i][key];
		}
		return value;
	}

后台java工程师只需要将数据库中的数据取出返回给前端，前端工程师通过AngularJS来取出json串中想要展示的数据，

jsonToString方法主要是通过html页面传递的json串和想要从json串中取出key对应的值，jsonToString方法用来取出key对应的value值。