2.品牌列表的实现
2.1 需求分析
实现品牌列表的查询(不用分页和条件查询)效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/f1a8417ee92f1d791550b3aef1394dd1.jpeg)
2.2 前端代码2.2.1 拷贝资源
将“资源/静态原型/运营商管理后台”下的页面资源拷贝到 pinyougou-manager-web 下
![](https://i-blog.csdnimg.cn/blog_migrate/fa99ef9204c5cef8caac9233ff60948b.jpeg)
其中 plugins 文件夹中包括了 angularJS 、bootstrap、JQuery 等常用前端库,我们将在项目中用到
2.2.2 引入 JS
修改 brand.html ,引入 JS
[AppleScript] 纯文本查看 复制代码
?
1 | < script type = "text/javascript" src = "../plugins/angularjs/angular.min.js" > < / script > |
![](https://i-blog.csdnimg.cn/blog_migrate/2b3e4e6e60704263ab90068369928deb.jpeg)
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 > |