黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 3 章规格及模板管理 七 [打印本页]

---

作者: 我是楠楠    时间: 2020-5-13 10:51
标题: 【郑州校区】品优购电商系统开发第 3 章规格及模板管理 七

【郑州校区】品优购电商系统开发第 3 章规格及模板管理 七

5.5 扩展属性
5.5.1 增加行
在 typeTemplateController.js 中新增代码

[AppleScript] 纯文本查看 复制代码

 //新增扩展属性行

$scope.addTableRow=function(){

$scope.entity.customAttributeItems.push({});

} 

在 type_template.html 中的“新建”按钮，执行实体的初始化操作

[AppleScript] 纯文本查看 复制代码

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

修改“新增扩展属性按钮”

[AppleScript] 纯文本查看 复制代码

 <button type="button" class="btn btn-default" title="新增扩展属性"

ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新增扩展属性</button> 

循环表格

[AppleScript] 纯文本查看 复制代码

<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 新增以下代码

[AppleScript] 纯文本查看 复制代码

 //删除扩展属性行

$scope.deleTableRow=function(index){

$scope.entity.customAttributeItems.splice(index,1);//删除

}  

修改每行的删除按钮

[AppleScript] 纯文本查看 复制代码

 <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 ，绑定文本框

[AppleScript] 纯文本查看 复制代码

 <tr>

<td>模板名称</td>

<td><input ng-model="entity.name" class="form-control"

placeholder="模板名称"> </td>

</tr>

保存按钮

[AppleScript] 纯文本查看 复制代码

 <button class="btn btn-success" data-dismiss="modal" aria-hidden="true"

ng-click="save()">保存</button> 

5.7 修改模板
修改 typeTemplateController.js 的 findOne 方法

[AppleScript] 纯文本查看 复制代码

//查询实体

$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

[AppleScript] 纯文本查看 复制代码

//提取 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[key];

}

return value;

}

页面上使用该函数进行转换

[AppleScript] 纯文本查看 复制代码

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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2