【SSM項目】電商平台項目第3天——規格及模闆管理

課程目标

目标1：了解和運用angularJS的service

目标2：了解和運用控制器繼承

目标3：掌握代碼生成器的使用

目标4：實作規格管理

目标5：實作模闆管理

1.前端分層開發

1.1 需求分析

我們在上次課學習了angularJS并完成的品牌管理的增删改查功能。但是我們看代碼，JS和html都放在一起，并不利于我們後期的維護。我們可以在前端代碼中也運用MVC的設計模式，将代碼進行分離，提高程式的可維護性。

1.2 自定義服務

在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。我們在上次課中使用了内置服務$http .其實我們也可以自己來定義服務，而服務會封裝一些操作。我們在不同的控制器中可以調用同一個服務，這樣服務的代碼将會被重用。

我們現在就修改一下我們的品牌管理代碼，使用自定義服務。

var app=angular.module('pinyougou', ['pagination']);//定義子產品
//品牌服務層
 app.service('brandService',function($http){
        //讀取清單資料綁定到表單中
        this.findAll=function(){
          return $http.get('../brand/findAll.do');    
        }
       //其它方法省略.......
 }); 
 //品牌控制層 
app.controller('brandController' ,function($scope,brandService){    
   //讀取清單資料綁定到表單中  
  $scope.findAll=function(){
      brandService.findAll().success(
        function(response){
          $scope.list=response;
        }     
      );
  }
  //其它方法省略........         
});       

1.3代碼分離

我們剛才已經将與後端互動的部分放入自定義服務，目的是不同的控制層都可以重複調用服務層方法。是以我們還需要将代碼分離出來，以便調用。

1.3.1 前端基礎層

在pinyougou-manager-web工程js下建立base.js 
var app=angular.module('pinyougou',[]);
建立base_pagination.js
var app=angular.module('pinyougou',['pagination']);      

一個用于不需要分頁功能的頁面，一個用于需要分頁功能的頁面.

1.3.2 前端服務層

在pinyougou-manager-web工程js下建立service檔案夾。建立brandService.js

//品牌服務層
app.service('brandService',function($http){
  //讀取清單資料綁定到表單中
  this.findAll=function(){
    return $http.get('../brand/findAll.do');    
  }
  //其它方法省略........          
});      

1.3.3 前端控制層

在pinyougou-manager-web的js檔案夾下建立brandController.js

//品牌控制層 
app.controller('brandController' ,function($scope,brandService){    
     //讀取清單資料綁定到表單中  
    $scope.findAll=function(){
        brandService.findAll().success(
            function(response){
                $scope.list=response;
            }           
        );
    }
    //其它方法省略........     
});       

1.3.4 修改頁面

去掉brand.html原來的JS代碼，引入剛才我們建立的JS

<script type="text/javascript" src="../js/base_pagination.js">  </script>
<script type="text/javascript" src="../js/service/brandService.js">  </script>
<script type="text/javascript" src="../js/controller/brandController.js">  </script>      

2.控制器繼承

2.1需求分析

有些功能是每個頁面都有可能用到的，比如分頁，複選等等，如果我們再開發另一個功能，還需要重複編寫。怎麼能讓這些通用的功能隻寫一次呢？我們通過繼承的方式來實作。

2.2前端代碼

2.2.1 建立父控制器

在pinyougou-manager-web的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: 10,
         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;
            }           
        );
    }    
    //其它方法省略........ 
});       

scope

3.代碼生成器

3.1代碼生成

我們接下來使用《黑馬程式員代碼生成器2.4》來完成代碼的編寫。生成後将代碼拷貝到工程中。具體步驟如下：

（1）資源中HeimaCodeUtil_V2.4 就是代碼生成器，将其拷貝到不包含中文和空格的目錄下

（2）運作heima_code_util.exe 即可看到資料庫連接配接視窗

（3）選擇資料庫類型為 MYSQL ,輸入使用者名和密碼後點選“測試連接配接”按鈕,提示連接配接成功後選擇資料庫，點選“下一步”。

（4）選擇模闆為SSM+dubbox+angularJS(服務層+WEB層)

這個模闆不會生成資料通路層和實體類，因為我們之前已經用逆向工程完成了資料通路層與實體類的生成。

（5）點選生成代碼按鈕，提示成功後，到生成路徑去找生成的代碼，并拷貝到我們的工程中。3.2代碼拷貝

将商家商品相關代碼拷貝到工程。

（1）拷貝服務接口

（2）拷貝服務實作類

（3）拷貝控制器

（4）拷貝JS

3.3安裝到本地倉庫

執行maven指令install ,将最新的品優購代碼安裝到本地倉庫

4.規格管理

4.1需求及表結構分析

4.1.1 需求

實作規格管理功能

4.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  排序      

4.2規格清單

4.2.1 引入JS

修改pinyougou-manager-web工程的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>      

4.2.2 放置分頁元件

<!-- 分頁 -->
<tm-pagination conf="paginationConf"></tm-pagination>       

4.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>      

4.3新增規格

4.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  type="checkbox"></td> 
  <td>
  <input ng-model="pojo.optionName" class="form-control" placeholder="規格選項"> 
  </td>
  <td>
  <input ng-model="pojo.orders" class="form-control" placeholder="排序"> 
  </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>      

4.3.2 删除行的實作

實作思路：在每一行将索引值傳遞給集合，在集合中删除。

修改specificationController.js 新增以下代碼

//批量選項删除 
  $scope.deleTableRow=function(index){      
    $scope.entity.specificationOptionList.splice(index,1);//删除      
  } 
修改每行的删除按鈕
<button type="button" class="btn btn-default" title="删除"  ng-click="deleTablenRow($index)"><i class="fa fa-file-o"></i> 删除</button>
$index 用于擷取ng-repeat指令循環中的索引。      

4.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類

package com.pinyougou.pojogroup;
import java.io.Serializable;
import java.util.List;
import com.pinyougou.pojo.TbSpecification;
import com.pinyougou.pojo.TbSpecificationOption;
/**
 * 規格組合實體類 
 * @author Administrator
 *
 */
public class Specification implements Serializable {  
  private TbSpecification specification;
  private List<TbSpecificationOption> specificationOptionList;
  
  public TbSpecification getSpecification() {
    return specification;
  }
  public void setSpecification(TbSpecification specification) {
    this.specification = specification;
  }
  public List<TbSpecificationOption> getSpecificationOptionList() {
    return specificationOptionList;
  }
  public void setSpecificationOptionList(List<TbSpecificationOption> specificationOptionList) {
    this.specificationOptionList = specificationOptionList;
  } 
}      

（3）修改pinyougou-sellergoods-interface的SpecificationService.java

/**
 * 增加
*/
public void add(Specification specification);      

（4）修改pinyougou-sellergoods-service的SpecificationServiceImpl.java

/**
   * 增加
   */
  @Override
  public void add(Specification specification) {  
    specificationMapper.insert(specification.getSpecification());//插入規格 
    //循環插入規格選項
    for(TbSpecificationOption specificationOption:specification.getSpecificationOptionList()){  specificationOption.setSpecId(specification.getSpecification().getId());//設定規格ID    specificationOptionMapper.insert(specificationOption);    
    }   
  }      

（5）修改pinyougou-manager-web的SpecificationController.java

/**
 * 增加
 * @param specification
 * @return
 */
@RequestMapping("/add")
public Result add(@RequestBody Specification specification){
  try {
    specificationService.add(specification);
    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>      

4.4修改規格

4.4.1 擷取規格資料

實作思路：通過規格ID，到後端查詢規格和規格選項清單，然後通過組合實體類傳回結果

（1）修改pinyougou-sellergoods-interface的SpecificationService.java

/**
 * 根據ID擷取實體
 * @param id
 * @return
 */
public Specification findOne(Long id);      

（2）修改pinyougou-sellergoods-service的SpecificationServiceImpl.java

/**
   * 根據ID擷取實體
   * @param id
   * @return
   */
  @Override
  public Specification findOne(Long id){    
    //查詢規格
    TbSpecification tbSpecification = specificationMapper.selectByPrimaryKey(id);
    //查詢規格選項清單
    TbSpecificationOptionExample example=new TbSpecificationOptionExample();
    Criteria criteria = example.createCriteria();
    criteria.andSpecIdEqualTo(id);//根據規格ID查詢    
    List<TbSpecificationOption> optionList = specificationOptionMapper.selectByExample(example);
    //建構組合實體類傳回結果
    Specification spec=new Specification();
    spec.setSpecification(tbSpecification);
    spec.setSpecificationOptionList(optionList);    
    return spec;    
  }      

（3）修改pinyougou-manager-web的SpecificationController.java

@RequestMapping("/findOne")

public Specification findOne(Long id){

return specificationService.findOne(id);

}

（4）修改頁面specification.html 中清單的修改按鈕

<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>         

4.4.2 儲存修改結果

（1）修改pinyougou-sellergoods-interface的SpecificationService.java

/**
 * 修改
 */
public void update(Specification specification);      

（2）修改pinyougou-sellergoods-service的SpecificationServiceImpl.java

/**
   * 修改
   */
  @Override
  public void update(Specification specification){
    //儲存修改的規格
    specificationMapper.updateByPrimaryKey(specification.getSpecification());//儲存規格
    //删除原有的規格選項   
    TbSpecificationOptionExample example=new TbSpecificationOptionExample();
    com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();
    criteria.andSpecIdEqualTo(specification.getSpecification().getId());//指定規格ID為條件
    specificationOptionMapper.deleteByExample(example);//删除   
    //循環插入規格選項
    for(TbSpecificationOption specificationOption:specification.getSpecificationOptionList()){      
      specificationOption.setSpecId(specification.getSpecification().getId());
      specificationOptionMapper.insert(specificationOption);    
    } 
  }       

（3）修改pinyougou-manager-web的SpecificationController.java

/**
   * 修改
   * @param specification
   * @return
   */
  @RequestMapping("/update")
  public Result update(@RequestBody Specification specification){
    try {
      specificationService.update(specification);
      return new Result(true, "修改成功");
    } catch (Exception e) {
      e.printStackTrace();
      return new Result(false, "修改失敗");
    }
  }       

（4）修改specification.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);
        }
      }   
    );        
  }      

4.5删除規格

實作思路：我們要删除規格的同時，還要記得将關聯的規格選項删除掉。

4.5.1 後端代碼

修改pinyougou-sellergoods-service的SpecificationServiceImpl.java
  /**
   * 批量删除
   */
  @Override
  public void delete(Long[] ids) {
    for(Long id:ids){
      specificationMapper.deleteByPrimaryKey(id);     
      //删除原有的規格選項   
      TbSpecificationOptionExample example=new TbSpecificationOptionExample();
      com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();
      criteria.andSpecIdEqualTo(id);//指定規格ID為條件
      specificationOptionMapper.deleteByExample(example);//删除
    }   
  }      

4.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>      

5.模闆管理

5.1 需求及表結構分析

5.1.1 需求分析

首選我們需要了解模闆的作用。模闆主要有兩個：

1是用于關聯品牌與規格

2定義擴充屬性

5.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  擴充屬性      

5.2 模闆清單

5.2.1 引入JS

修改type_template.html ，引入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/service/typeTemplateService.js">  </script>
<script type="text/javascript" src="../js/controller/baseController.js">  </script>
<script type="text/javascript" src="../js/controller/typeTemplateController.js">  </script>      

5.2.2 放置分頁元件

<tm-pagination conf="paginationConf"></tm-pagination>      

5.2.3 指令與表達式

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="typeTemplateController" >

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

5.3 品牌下拉清單

在彈出視窗中有個品牌下拉清單，要求品牌是可以選擇多個，這與我們之前的單選的下拉清單是不同的。我們要想實作這個功能，需要使用select2 元件來完成。

5.2.1 認識select2

我們來看例子：我們需要的就是這樣可以多選的下拉框

5.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用于指定使用者選擇後送出的變量

最終實作效果如下：

5.2.3 後端資料支撐

我們現在讓這個下拉清單的資料從資料庫中提取，修改後端代碼

（1）pinyougou-dao 工程 ，在TbBrandMapper.xml中添加SQL語句配置

<select id="selectOptionList"  resultType="java.util.Map" >
    select id,name as text from tb_brand
  </select>      

（2）在pinyougou-dao 的TbBrandMapper中添加方法定義

List<Map> selectOptionList();      

（3）修改pinyougou-sellergoods-interface 的BrandService.java，增加方法定義

/**
 * 品牌下拉框資料
 */
List<Map> selectOptionList();      

（4）修改pinyougou-sellergoods-service的BrandServiceImpl.java，增加方法

/**
 * 清單資料
 */
public List<Map> selectOptionList() {
  return brandMapper.selectOptionList();
}      

（5）修改pinyougou-manager-web的BrandController.java

@RequestMapping("/selectOptionList")
public List<Map> selectOptionList(){
  return brandService.selectOptionList();
}      

（6）修改pinyougou-manager-web的brandService.js

//下拉清單資料
  this.selectOptionList=function(){
    return $http.get('../brand/selectOptionList.do');
  }      

（7）修改pinyougou-manager-web的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}; 
      }
    );    
  }      

（8）修改type_template.html ，添加JS引入

<script type="text/javascript" src="../js/base_pagination.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/controller/baseController.js">  </script>
<script type="text/javascript" src="../js/controller/typeTemplateController.js">  </script>      

特别注意一下，JS引入的位置，要在typeTemplateController.js之前，因為該控制器要使用到它

（9）修改type_template.html ，添加初始化

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="typeTemplateController" ng-init="findBrandList()">      

5.4 規格下拉清單

（代碼略，參照品牌下拉清單的實作步驟 ）

5.5 擴充屬性

5.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 class="form-control" ng-model="pojo.text" placeholder="屬性名稱" ></td>
<td><button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button> </td>
</tr>      

5.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指令循環中的索引。

5.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>      

5.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對象才能實作資訊的回顯。

5.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>      

5.9 優化模闆清單的顯示

我們現在完成的清單中都是以JSON格式顯示的，不利于使用者的查詢。

我們需要将資訊以更友好的方式展現出來,如下圖形式

//提取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>