java框架教程
1、js获取数据
investService.getNewStacksList().success(function(response){
if(response.op.code == "Y"){
var tempInfomationList = [];
angular.forEach(response.list,function(newstack){
tempInfomationList.push(newstack);
});
$scope.col = "sub_bgn_dt_on"; //默认按sub_bgn_dt_on字段排序
$scope.newstackslist = tempInfomationList;
}
$scope.$apply();
});
2、定义一个filter，以便前端的html使用
angular.module("gp").filter("newstacksFilter",function(){
return function(newstackslist,s_val){
var tempInfomationList = [];
angular.forEach(newstackslist,function(newstackInfo){
if(s_val!=null && s_val!=""){
if((newstackInfo.trd_code).indexOf(s_val)>=0
|| (newstackInfo.secu_sht).indexOf(s_val)>=0){
tempInfomationList.push(newstackInfo);
}
}else{
tempInfomationList = newstackslist;
}
});
return tempInfomationList;
}
})
3、html部分代码
<div class="newxg-table">
<table style="width:99%">
<thead>
<tr>
<th ng-click="col='trd_code';desc=!desc"><a>股票代码</a></th>
<th ng-click="col='secu_sht';desc=!desc"><a>股票名称</a></th>
<th ng-click="col='sub_code';desc=!desc"><a>申购<br/>代码</a></th>
<th ng-click="col='act_iss_shr1';desc=!desc"><a>发行<br/>总数<br/>(万股)</a></th>
<th ng-click="col='act_iss_shr_on';desc=!desc"><a>网上<br/>发行<br/>(万股)</a></th>
<th ng-click="col='sub_shr_max_on';desc=!desc"><a>申购<br/>上限<br/>(万股)</a></th>
<th ng-click="col='sub_shr_max_on1';desc=!desc"><a>申购资<br/>金上限<br/>(万元)</a></th>
<th ng-click="col='iss_prc';desc=!desc"><a>发行<br/>价格</a></th>
<th ng-click="col='cls_prc';desc=!desc"><a>最新价</th>
<th ng-click="col='sub_bgn_dt_on';desc=!desc"><a>申购<br/>日期</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stack in newstackslist | newstacksFilter:s_val | orderBy:col:!desc">
<td ng-bind="stack.trd_code"></td>
<td ng-bind="stack.secu_sht"></td>
<td ng-bind="stack.sub_code"></td>
<td ng-bind="stack.act_iss_shr1"></td>
<td ng-bind="stack.act_iss_shr_on"></td>
<td ng-bind="stack.sub_shr_max_on"></td>
<td align=right ng-bind="stack.sub_shr_max_on1 | number:3 "></td>
<td align=right ng-bind="stack.iss_prc? (stack.iss_prc | number:2 ): ''"></td>
<td align=right ng-bind="stack.cls_prc? (stack.cls_prc | number:2 ): ''"></td>
<td ng-bind="stack.sub_bgn_dt_on | date:'MM-dd'"></td>
</tr>
</tbody>
</table>
</div>
4、最后效果图：
注：点击表头文字链可进行排序。如：点击“发行价格”按发行价格排序
