Java之品优购课程讲义_day02（2）

2.品牌列表的实现

2.1 需求分析

实现品牌列表的查询（不用分页和条件查询）效果如下：


2.2 前端代码2.2.1 拷贝资源

将“资源/静态原型/运营商管理后台”下的页面资源拷贝到 pinyougou-manager-web 下

其中 plugins 文件夹中包括了 angularJS 、bootstrap、JQuery 等常用前端库，我们将在项目中用到

2.2.2 引入 JS

修改 brand.html ，引入 JS

[AppleScript] 纯文本查看 复制代码

?

1	<script  type="text/javascript"  src="../plugins/angularjs/angular.min.js"></script>

2.1.1 编写 JS代码

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

var  app=angular.module('pinyougou',  []);//定义模块 app.controller('brandController'  ,function($scope,$http){ //读取列表数据绑定到表单中   $scope.findAll=function(){   $http.get('../brand/findAll.do').success(   function(response){   $scope.list=response;   }   );   }   });

2.1.1 循环显示表格数据

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21

<tbody>   <tr  ng-repeat="entity  in  list">   <td><input    type="checkbox"  ></td>   <td>{{entity.id}}</td>   <td>{{entity.name}}</td>   <td>{{entity.firstChar}}</td>   <td  class="text-center">   <button  type="button"  class="btn  bg-olive  btn-xs"  data-toggle="modal" data-target="#editModal"    >修改</button>   </td>   </tr>   </tbody>