品优购电商系统开发第 3 章规格及模板管理 七

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
表格中的复选框


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