电商项目——3

1.代码分离

在AngularJS中，服务是一个函数或对象，可在你的AngularJS应用中使用，使用的内置服务$http，其中我们也可自己来定义服务，而服务会封装一些操作。在不同的卡侬之气中可以调用同一个服务，这样服务的代码将会被重用。提高代码的可复用性。

2.建立父控制器

3.继承父控制器

app.controller("brandContorller", function($scope, $controller, brandService) {
	// 控制器继承
	$controller('baseController', {
		$scope : $scope
	})

4.规格管理

引入JS
放置分页组件

指令与表达式

<!-- 在body元素指定模块名和控制器名 -->
<body class="hold-transition skin-red sidebar-mini"
ng-app="pinyougou" ng-controller="specificationController" >

循环表格行

5.新增规格

在Controller.js新增push({})方法
“新建选项”按钮 ng-click="addTableRow()"

循环列表行，绑定表格内的编辑框

<tr ng-repeat="pojp in entity.specificationOptionList">
.......
<td>
<input ng-model="pojo.optionName" class="form-control" placeholder="规格选项">

注意：要修改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>

6.删除行

实现思路：在每一行将索引值传递给集合，在集合中删除

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>

在html复选框中添加集合

<td><input type="checkbox" ng-click="updateSelection($event,entity.id)"></td>

7.提交保存

实现思路：将规格和规格选项数据合并成一个对象来传递，所以要用一个对象将这两个对象组合起来。在业务逻辑中，得到组合对象中的规格和规格选项列表，插入规格返回规格ID，然后循环插入规格选项。

修改dao的xml

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

在pojo建立com.xxxx.pojogroup包，包下建立Specification类

private TbSpecification specification;
private List<TbSpecificationOption> specificationOptionList;

修改interface的SpecificationService.java

public void add(Specification specification)

修改impl和Controller.java类
修改页面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>

绑定保存按键

8.模板管理

使用select2

注意：后台数据要对应id text

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

9.修改模板

修改Controller.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);

});}

10.优化模板列表的显示

//提取 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>
北京市昌平区建材城西路金燕龙办公楼一层 电话：400-618-9090
<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>