品優購電商系統開發
第3章
規格及模板管理
傳智播客.黑馬程序員
1.前端分層開發
1.1 需求分析
我們在上次課學習了angularJS並完成的品牌管理的增刪改查功能。但是我們看代碼,JS和html都放在一起,並不利於我們后期的維護。我們可以在前端代碼中也運用MVC的設計模式,將代碼進行分離,提高程序的可維護性。
1.2 自定義服務
在 AngularJS 中,服務是一個函數或對象,可在你的 AngularJS 應用中使用。我們在上次課中使用了內置服務$http .其實我們也可以自己來定義服務,而服務會封裝一些操作。我們在不同的控制器中可以調用同一個服務,這樣服務的代碼將會被重用。
我們現在就修改一下我們的品牌管理代碼,使用自定義服務。
1.3代碼分離
我們剛才已經將與后端交互的部分放入自定義服務,目的是不同的控制層都可以重復調用服務層方法。所以我們還需要將代碼分離出來,以便調用。
修改頁面
去掉brand.html原來的JS代碼,引入JS
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"> </script> <!-- 分頁組件開始 --> <script src="../plugins/angularjs/pagination.js"></script> <link rel="stylesheet" href="../plugins/angularjs/pagination.css"> <!-- 分頁組件結束 --> <script type="text/javascript" src="../js/base_pagination.js"> </script> <script type="text/javascript" src="../js/controller/baseController.js"> </script> <script type="text/javascript" src="../js/controller/brandController.js"> </script> |
2.控制器繼承
2.1需求分析
有些功能是每個頁面都有可能用到的,比如分頁,復選等等,如果我們再開發另一個功能,還需要重復編寫。怎么能讓這些通用的功能只寫一次呢?我們通過繼承的方式來實現。
2.2前端代碼
2.2.1 父控制器
在manager的js/controller目錄下的baseController.js
//基本控制層 app.controller('baseController' ,function($scope){ //重新加載列表 數據 $scope.reloadList=function(){ //切換頁碼 $scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage); } //分頁控件配置 $scope.paginationConf = { currentPage: 1, totalItems: 0, itemsPerPage: 10, perPageOptions: [10, 20, 30, 40, 50], onChange: function(){ $scope.reloadList();//重新加載 } }; $scope.selectIds=[];//選中的ID集合 //更新復選 $scope.updateSelection = function($event, id) { if($event.target.checked){//如果是被選中,則增加到數組 $scope.selectIds.push( id); }else{ var idx = $scope.selectIds.indexOf(id); $scope.selectIds.splice(idx, 1);//刪除 } } }); |
2.2.2 品牌控制器層
brandController.js
//品牌控制層 app.controller('brandController' ,function($scope,$controller,brandService){ $controller('baseController',{$scope:$scope});//繼承 //讀取列表數據綁定到表單中 $scope.findAll=function(){ brandService.findAll().success( function(response){ $scope.list=response; } ); } //其它方法省略........ }); |
$controller也是angular提供的一個服務,可以實現偽繼承,實際上就是與BaseController共享$scope
2.2.2 品牌業務層
// 定義服務層: app.service("brandService",function($http){ this.findAll = function(){ return $http.get("../brand/findAll.do"); }
this.findByPage = function(page,rows){ return $http.get("../brand/findByPage.do?page="+page+"&rows="+rows); }
this.save = function(entity){ return $http.post("../brand/save.do",entity); }
this.update=function(entity){ return $http.post("../brand/update.do",entity); }
this.findById=function(id){ return $http.get("../brand/findById.do?id="+id); }
this.dele = function(ids){ return $http.get("../brand/delete.do?ids="+ids); }
this.search = function(page,rows,searchEntity){ return $http.post("../brand/search.do?page="+page+"&rows="+rows,searchEntity); } }); |
3.規格管理
3.1需求及表結構分析
3.1.1 需求
實現規格管理功能
3.1.2 表結構
tb_specification 規格表
字段 |
類型 |
長度 |
含義 |
Id |
Bigint |
|
主鍵 |
spec_name |
Varchar |
255 |
規格名稱 |
tb_specification_option 規格選項表
字段 |
類型 |
長度 |
含義 |
id |
Bigint |
|
主鍵 |
option_name |
Varchar |
200 |
規格選項名稱 |
spec_id |
Bigint |
30 |
規格ID |
orders |
Int |
11 |
排序 |
3.2規格列表
3.2.1 引入JS
修改pinyougou-web-manager工程的specification.html
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"> </script> <script src="../plugins/angularjs/pagination.js"></script> <link rel="stylesheet" href="../plugins/angularjs/pagination.css"> <script type="text/javascript" src="../js/base_pagination.js"> </script> <script type="text/javascript" src="../js/service/specificationService.js"> </script> <script type="text/javascript" src="../js/controller/baseController.js"></script> <script type="text/javascript" src="../js/controller/specificationController.js"> </script> |
3.2.2 放置分頁組件
<!-- 分頁 --> <tm-pagination conf="paginationConf"></tm-pagination> |
3.2.3 指令與表達式
在body元素指定模塊名和控制器名
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="specificationController" > |
循環表格行
<tr ng-repeat="entity in list"> <td><input type="checkbox" ></td> <td>{{entity.id}}</td> <td>{{entity.specName}}</td> <td class="text-center"> <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改</button> </td> </tr> |
3.2.4 sellerGoods中SpecificationServiceImpl 中添加
// 返回分頁對象 查詢條件 public PageResult search(Integer pageNum, Integer pageSize, Specification specification) { SpecificationQuery specificationQuery = new SpecificationQuery(); // 判斷查詢條件 if (null != specification.getSpecName()) { specificationQuery.createCriteria().andSpecNameLike("%" + specification.getSpecName() + "%"); } // 使用的是angularjs的分頁對象 當前頁肯定有值 每頁數 顯示也有值 不可能是Null PageHelper.startPage(pageNum, pageSize); Page<Specification> page = (Page<Specification>) specificationDao.selectByExample(specificationQuery); return new PageResult(page.getTotal(), page.getResult()); } |
3.2.4 manager中SpecificationController 中添加
//查詢規格列表 分頁 + 查詢條件 @RequestMapping(value = "/specification/search.do") public PageResult search(Integer page,Integer rows,@RequestBody Specification specification){ return specificationService.search(page, rows, specification); } |
3.3新增規格
3.3.1 新增行的實現
修改specificationController.js 新增以下代碼
//新增選項行 $scope.addTableRow=function(){ $scope.entity.specificationOptionList.push({}); } |
specification.html “新建選項”按鈕
<button type="button" class="btn btn-default" title="新建" ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新建</button> |
循環列表行,綁定表格內的編輯框
<tr ng-repeat="pojo in entity.specificationOptionList"> <td> <input ng-model="pojo.optionName" class="form-control" placeholder="規格選項"/> </td> <td> <input ng-model="pojo.orders" class="form-control" placeholder="排序"/> </td> <td> <button type="button" class="btn btn-default" title="刪除" ng-click="deleTableRow($index)"><i class="fa fa-file-o"></i> 刪除</button> </td> </tr> |
注意:要修改specification.html “新建”按鈕,彈出窗口時對entity進行初始化,否則向集合添加數據時會報錯!
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={'specificationOptionList':[]}"><i class="fa fa-file-o"></i> 新建</button> |
3.3.2 刪除行的實現
實現思路:在每一行將索引值傳遞給集合,在集合中刪除。
修改specificationController.js 新增以下代碼
//批量選項刪除 $scope.deleTableRow=function(index){ $scope.entity.specificationOptionList.splice(index,1);//刪除 } |
修改每行的刪除按鈕
<button type="button" class="btn btn-default" title="刪除" ng-click="deleTableRow($index)"><i class="fa fa-file-o"></i> 刪除</button> |
$index 用於獲取ng-repeat指令循環中的索引。
3.3.3 提交保存
實現思路:我們將規格和規格選項數據合並成一個對象來傳遞,這時我們需要用一個對象將這兩個對象組合起來。在業務邏輯中,得到組合對象中的規格和規格選項列表,插入規格返回規格ID,然后循環插入規格選項。
(1)我們要增加規格選項,必須要知道新增規格的ID, 所以我們在修改pinyougou-dao 的TbSpecificationMapper.xml ,在insert節點后添加如下配置
<insert id="insert" parameterType="com.pinyougou.pojo.TbSpecification" > <selectKey resultType="java.lang.Long" order="AFTER" keyProperty="id"> SELECT LAST_INSERT_ID() AS id </selectKey> insert into tb_specification (id, spec_name) values (#{id,jdbcType=BIGINT}, #{specName,jdbcType=VARCHAR}) </insert> |
(2)在pinyougou-pojo 建立com.pinyougou.pojogroup包,包下建立Specification類
/** * 規格組合實體類 * @author lx * */ public class SpecificationVo implements Serializable{
/** * */ private static final long serialVersionUID = 1L; //規格對象 private Specification specification; //規格屬性對象 private List<SpecificationOption> specificationOptionList; |
(3)修改sellergoods的SpecificationServiceImpl.java
/** * 增加 */ @Override public void add(SpecificationVo vo) { //保存規格表 並返回規格的ID specificationDao.insertSelective(vo.getSpecification()); //保存規格屬性表 多個 List<SpecificationOption> specificationOptionList = vo.getSpecificationOptionList(); for (SpecificationOption specificationOption : specificationOptionList) { //設置規格表的ID 規格屬性表的外鍵 specificationOption.setSpecId(vo.getSpecification().getId());
specificationOptionDao.insertSelective(specificationOption); }
} |
(5)修改manager的SpecificationController.java
/** * 增加 * @param specification * @return */ @RequestMapping("/add") public Result add(@RequestBody SpecificationVo vo){ try { specificationService.add(vo); return new Result(true, "增加成功"); } catch (Exception e) { e.printStackTrace(); return new Result(false, "增加失敗"); } } |
(6)修改頁面specification.html
綁定規格名稱
<table class="table table-bordered table-striped" width="800px"> <tr> <td>規格名稱</td> <td> <input ng-model="entity.specification.specName" class="form-control" placeholder="規格名稱" > </td> </tr> </table> |
綁定保存按鈕事件
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button> |
3.4修改規格
3.4.1 獲取規格數據
實現思路:通過規格ID,到后端查詢規格和規格選項列表,然后通過組合實體類返回結果
(1)修改pinyougou-sellergoods-service的SpecificationServiceImpl.java
////通過規格ID 查詢規格表 及規格屬性表結果集 public SpecificationVo findOne(Long id){ SpecificationVo vo = new SpecificationVo(); vo.setSpecification(specificationDao.selectByPrimaryKey(id)); SpecificationOptionQuery query = new SpecificationOptionQuery(); query.createCriteria().andSpecIdEqualTo(id); vo.setSpecificationOptionList(specificationOptionDao.selectByExample(query)); return vo; } |
(2)修改pinyougou-manager-web的SpecificationController.java
//通過規格ID 查詢規格表 及規格屬性表結果集 @RequestMapping(value = "/findOne.do") public SpecificationVo findOne(Long id){ return specificationService.findOne(id); } |
(3)修改頁面specification.html 中列表的修改按鈕
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button> |
3.4.2 保存修改結果
(1)修改pinyougou-sellergoods-service的SpecificationServiceImpl.java
//修改規格表及規格屬性表 public void update(SpecificationVo vo){ //修改規格表 specificationDao.updateByPrimaryKeySelective(vo.getSpecification()); //刪除規格屬性表 SpecificationOptionQuery query = new SpecificationOptionQuery(); query.createCriteria().andSpecIdEqualTo(vo.getSpecification().getId()); specificationOptionDao.deleteByExample(query); //再保存規格屬性表 List<SpecificationOption> specificationOptionList = vo.getSpecificationOptionList(); for (SpecificationOption specificationOption : specificationOptionList) { //設置規格表的ID 規格屬性表的外鍵 specificationOption.setSpecId(vo.getSpecification().getId()); specificationOptionDao.insertSelective(specificationOption); }
} |
(2)修改pinyougou-manager-web的SpecificationController.java
//修改 @RequestMapping(value = "/update") public Result update(@RequestBody SpecificationVo vo){ try {
specificationService.update(vo); return new Result(true,"修改成功"); } catch (Exception e) { // TODO: handle exception e.getStackTrace(); return new Result(false,"修改失敗"); } } |
(3)修改specificationController.js的save方法
//保存 $scope.save=function(){ var serviceObject;//服務層對象 if($scope.entity.specification.id!=null){//如果有ID serviceObject=specificationService.update( $scope.entity ); //修改 }else{ serviceObject=specificationService.add( $scope.entity );//增加 } serviceObject.success( function(response){ if(response.success){ //重新查詢 $scope.reloadList();//重新加載 }else{ alert(response.message); } } ); } |
3.5刪除規格
實現思路:我們要刪除規格的同時,還要記得將關聯的規格選項刪除掉。
3.5.1 后端代碼
修改sellergoods的SpecificationServiceImpl.java
/** * 批量刪除 */ @Override //刪除規格表 刪除規格屬性表 public void delete(Long[] ids){ for (Long id : ids) { specificationDao.deleteByPrimaryKey(id); //刪除規格屬性表 SpecificationOptionQuery query = new SpecificationOptionQuery(); query.createCriteria().andSpecIdEqualTo(id); specificationOptionDao.deleteByExample(query); } } |
3.5.2 前端代碼
修改pinyougou-manager-web的specification.html
列表的復選框
<input type="checkbox" ng-click="updateSelection($event,entity.id)"> |
刪除按鈕
<button type="button" class="btn btn-default" title="刪除" ng-click="dele()" ><i class="fa fa-trash-o"></i> 刪除</button> |
4.模板管理
4.1 需求及表結構分析
4.1.1 需求分析
首先我們需要理解模板的作用。模板主要有兩個:
1是用於關聯品牌與規格
2定義擴充屬性
4.1.2 表結構分析
tb_type_template 模板表
字段 |
類型 |
長度 |
含義 |
Id |
Bigint |
|
主鍵 |
name |
Varchar |
80 |
模板名稱 |
Spec_ids |
Varchar |
1000 |
關聯規格(json格式) |
brand_ids |
Varchar |
1000 |
關聯品牌(json格式) |
custom_attribute_items |
Varchar |
2000 |
擴展屬性 |
4.2 模板列表
4.2.1 引入JS
修改type_template.html ,引入JS
<link rel="stylesheet" href="../plugins/select2/select2.css" /> <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" /> <script src="../plugins/select2/select2.min.js" type="text/javascript"></script> <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script> <!-- 分頁組件開始 --> <script src="../plugins/angularjs/pagination.js"></script> <link rel="stylesheet" href="../plugins/angularjs/pagination.css"> <!-- 分頁組件結束 --> <script type="text/javascript" src="../js/base_pagination.js"></script> <script type="text/javascript" src="../js/angular-select2.js"> </script> <script type="text/javascript" src="../js/service/typeTemplateService.js"></script> <script type="text/javascript" src="../js/service/brandService.js"></script> <script type="text/javascript" src="../js/service/specificationService.js"></script> <script type="text/javascript" src="../js/controller/baseController.js"></script> <script type="text/javascript" src="../js/controller/typeTemplateController.js"></script> |
4.2.2 放置分頁組件
<tm-pagination conf="paginationConf"></tm-pagination> |
4.2.3 sellerGoods 的TypeTemplateServiceImpl
/** * 模板管理 * @author lx * */ @Service public class TypeTemplateServiceImpl implements TypeTemplateService {
@Autowired private TypeTemplateDao typeTemplateDao; //查詢 public PageResult search(TypeTemplate typeTemplate,Integer pageNum,Integer pageSize){ PageHelper.startPage(pageNum, pageSize); Page<TypeTemplate> page = (Page<TypeTemplate>) typeTemplateDao.selectByExample(null); return new PageResult(page.getTotal(), page.getResult()); } } |
4.2.3 TypeTemplateController
/** * 模塊管理 * @author lx * */ @RestController public class TypeTemplateController {
@Reference private TypeTemplateService typeTemplateService; //根據條件查詢模板分頁對象 @RequestMapping(value = "/typeTemplate/search.do") public PageResult search(@RequestBody TypeTemplate typeTemplate,Integer page,Integer rows){ return typeTemplateService.search(typeTemplate, page, rows);
} } |
4.3 品牌下拉列表
在彈出窗口中有個品牌下拉列表,要求品牌是可以選擇多個,這與我們之前的單選的下拉列表是不同的。我們要想實現這個功能,需要使用select2 組件來完成。
4.2.1 認識select2
我們來看例子:我們需要的就是這樣可以多選的下拉框
4.2.2 顯示品牌下拉列表(靜態)
(1)修改 type_template.html 引入JS, 上面已經一次性引入過了.這里不用再次操作.
(2)修改typeTemplateController.js ,定義品牌列表數據
$scope.brandList={data:[{id:1,text:'聯想'},{id:2,text:'華為'},{id:3,text:'小米'}]};//品牌列表 |
(3)在type_template.html 用select2組件實現多選下拉框
<input select2 select2-model="entity.brandIds" config="brandList" multiple placeholder="選擇品牌(可多選)" class="form-control" type="text"/> |
multiple 表示可多選
Config用於配置數據來源
select2-model用於指定用戶選擇后提交的變量
最終實現效果如下:
4.2.3 后端數據支撐
我們現在讓這個下拉列表的數據從數據庫中提取,修改后端代碼
(1)pinyougou-dao 工程 ,在BrandMapper.xml中添加SQL語句配置
<select id="selectOptionList" resultType="java.util.Map" > select id,name as text from tb_brand </select> |
(2)在pinyougou-dao 的BrandMapper中添加方法定義
List<Map> selectOptionList(); |
(3)修改pinyougou-sellergoods-interface 的BrandService.java,增加方法定義
/** * 品牌下拉框數據 */ List<Map> selectOptionList(); |
(4)修改sellergoods的BrandServiceImpl.java,增加方法
/** * 列表數據 */ public List<Map> selectOptionList() { return brandDao.selectOptionList(); } |
(5)修改manager的BrandController.java
@RequestMapping("/selectOptionList") public List<Map> selectOptionList(){ return brandService.selectOptionList(); } |
(6)修改manager的brandService.js
//下拉列表數據 this.selectOptionList=function(){ return $http.get('../brand/selectOptionList.do'); } |
(7)修改manager的typeTemplateController.js
因為我們在模板控制層中需要使用品牌服務層的方法,所以需要添加依賴注入
//控制層 app.controller('typeTemplateController' ,function($scope,$controller ,typeTemplateService ,brandService){ |
使用品牌服務方法實現查詢,結果賦給變量
$scope.brandList={data:[]};//品牌列表 //讀取品牌列表 $scope.findBrandList=function(){ brandService.selectOptionList().success( function(response){ $scope.brandList={data:response}; } ); } |
|
type_template.html加入下面代碼
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="typeTemplateController" ng-init="findBrandList()"> |
4.4 規格下拉列表
我們現在讓這個下拉列表的數據從數據庫中提取,修改后端代碼
(1)pinyougou-dao 工程 ,在SpecificationDao.xml中添加SQL語句配置
<select id="selectOptionList" resultType="java.util.Map" > select id,spec_name as text from tb_specification </select> |
(2)在pinyougou-dao 的SpecificationDao.java中添加方法定義
List<Map> selectOptionList(); |
(3)修改sellergoods 的SpecificationService.java,增加方法定義
List<Map> selectOptionList(); |
(4)修改sellergoods的SpecificationServiceImpl.java,增加方法
public List<Map> selectOptionList() { return specificationDao.selectOptionList(); } |
(5)修改pinyougou-manager-web的SpecificationController.java
@RequestMapping("/selectOptionList") public List<Map> selectOptionList() throws Exception { return specificationService.selectOptionList(); } |
(8)修改manager的specificationService.js
//下拉列表 this.selectOptionList=function(){ return $http.get('../specification/selectOptionList.do'); } |
(9)修改manager的typeTemplateController.js
因為我們在模板控制層中需要使用規格服務層的方法,所以需要添加依賴注入
//控制層 app.controller('typeTemplateController' ,function($scope,$controller ,typeTemplateService,brandService,specificationService){ |
使用規格服務方法實現查詢,結果賦給變量
$scope.specList={data:[]};//規格列表
//讀取規格列表 $scope.findSpecList=function(){ specificationService.selectOptionList().success( function(response){ $scope.specList={data:response}; } ); } |
type_template.html頁面加入下面代碼
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="typeTemplateController" ng-init="findBrandList();findSpecList()">
<tr> <td>關聯規格</td> <td> <input select2 select2-model="entity.specIds" config="specList" multiple placeholder="支持多選哦" class="form-control" type="text"/> </td> </tr> |
4.5 擴展屬性
4.5.1 增加行
在typeTemplateController.js中新增代碼
//新增擴展屬性行 $scope.addTableRow=function(){ $scope.entity.customAttributeItems.push({}); } |
在type_template.html中的“新建”按鈕,執行實體的初始化操作
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={customAttributeItems:[]}"><i class="fa fa-file-o"></i> 新建</button> |
修改“新增擴展屬性按鈕”
<button type="button" class="btn btn-default" title="新增擴展屬性" ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新增擴展屬性</button> |
循環表格
<tr ng-repeat="pojo in entity.customAttributeItems"> <td><input type="checkbox" class="icheckbox_square-blue" ></td> <td><input class="form-control" placeholder="屬性名稱" ng-model="pojo.text"></td> <td><button type="button" class="btn btn-default" title="刪除" ng-click="deleTableRow($index)"><i class="fa fa-trash-o"></i> 刪除</button></td> </tr> |
4.5.2 刪除行
實現思路:在每一行將索引值傳遞給集合,在集合中刪除。
修改typeTemplateController.js新增以下代碼
//刪除擴展屬性行 $scope.deleTableRow=function(index){ $scope.entity.customAttributeItems.splice(index,1);//刪除 } |
修改每行的刪除按鈕
<button type="button" ng-click="deleTableRow($index)" class="btn btn-default" title="刪除"><i class="fa fa-trash-o"></i> 刪除</button> |
$index 用於獲取ng-repeat指令循環中的索引。
4.6 新增模板
修改type_template.html ,綁定文本框
<tr> <td>模板類型</td> <td><input ng-model="entity.name" class="form-control" placeholder="模板類型"> </td> </tr> |
保存按鈕
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button> |
4.7 修改模板
修改typeTemplateController.js的findOne方法
//查詢實體 $scope.findOne=function(id){ typeTemplateService.findOne(id).success( function(response){ $scope.entity= response; $scope.entity.brandIds= JSON.parse($scope.entity.brandIds);//轉換品牌列表 $scope.entity.specIds= JSON.parse($scope.entity.specIds);//轉換規格列表 $scope.entity.customAttributeItems= JSON.parse($scope.entity.customAttributeItems);//轉換擴展屬性 } ); } |
從數據庫中查詢出來的是字符串,我們必須將其轉換為json對象才能實現信息的回顯。
4.8 刪除模板
修改type_template.html
表格中的復選框
<input type="checkbox" ng-click="updateSelection($event,entity.id)"> |
刪除按鈕
<button type="button" class="btn btn-default" title="刪除" ng-click="dele()"> <i class="fa fa-trash-o"></i> 刪除</button> |
4.9 優化模板列表的顯示
我們現在完成的列表中都是以JSON格式顯示的,不利於用戶的查詢。
我們需要將信息以更友好的方式展現出來,如下圖形式
我們需要將一個json字符串中某個屬性的值提取出來,用逗號拼接成一個新的字符串。這樣的功能比較常用,所以我們將方法寫到baseController.js
//提取json字符串數據中某個屬性,返回拼接字符串 逗號分隔 $scope.jsonToString=function(jsonString,key){ var json=JSON.parse(jsonString);//將json字符串轉換為json對象 var value=""; for(var i=0;i<json.length;i++){ if(i>0){ value+="," } value+=json[i][key]; } return value; } |
頁面上使用該函數進行轉換
<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" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button> </td> </tr> |