需求如下:如何使用angularJS实现这样的查询列表?
如果不懂angularJS可以看下前几篇的angularJS入门
接下来我们进入正题在实战项目中一般目前都是前后端分离的模式。
我们先实现后端代码:
@Reference
private BrandService brandService;
@RequestMapping("/findAll")
public List<TbBrand>findAll(){
return brandService.findAll();
}
前端实现代码
第一步肯定是显示引入angularJs的js文件
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
第二步建立一个angular模型
var app=angular.module("pinyougou");
第三步在body上引入
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" >
第四步构建controller
app.controller("brandContrller",function($scope,$http){}
第五步在body中引入controller
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandContrller" >
第六步写controler的中的内容
app.controller("brandContrller",function($scope,$http){
//查询品牌列表
$scope.findAll=function(){
//这里$http.get可以理解成ajax
$http.get("../brand/findAll.do").success(function(response){
$scope.list=response;
});
}
第七步在列表中取值 ng-repeat这个指定 相当于foreach
<tr ng-repeat=" brand in list">
<td><input type="checkbox" ></td>
<td>{{brand.id}}</td>
<td>{{brand.name}}</td>
<td>{{brand.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
</tr>