一、回显三级分类列表的小技巧
1、分页查询商品显示
将三级分类列表全部查出放入数组中
// 查询所有三级目录的方法、将其以id为索引，name为值，放入数组中
$scope.findItemCatList=function(){
itemCatService.findAll().success(function(data) {
//初始化数组
$scope.itemCatList =[{}];
//循环存值
for(var i=0;i<data.length;i++){
$scope.itemCatList[data[i].id]=data[i].name;
}
});
};页面代码
<!--数据列表-->
<table id="dataList"
class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input
ng-click="selAll()" id="selall" type="checkbox"
class="icheckbox_square-blue"></th>
<th class="sorting_asc">商品ID</th>
<th class="sorting">商品名称</th>
<th class="sorting">商品价格</th>
<th class="sorting">一级分类</th>
<th class="sorting">二级分类</th>
<th class="sorting">三级分类</th>
<th class="sorting">状态</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in entitys">
<td><input ng-click="updateSelection($event,entity.tbGoods.id)"
type="checkbox"></td>
<td>{{entity.tbGoods.id}}</td>
<td>{{entity.tbGoods.goodsName}}</td>
<td>{{entity.tbGoods.price}}</td>
<!-- 从分类列表的数组中获取三级分类列表列表 -->
<td>{{itemCatList[entity.tbGoods.category1Id]}}</td>
<td>{{itemCatList[entity.tbGoods.category2Id]}}</td>
<td>{{itemCatList[entity.tbGoods.category3Id]}}</td>
<td><span>{{state[entity.tbGoods.auditStatus]}}</span></td>
<td class="text-center">
<button type="button" ng-click="toEditPage(entity.tbGoods.id)"
class="btn bg-olive btn-xs">修改</button>
</td>
</tr>
</tbody>
</table>二、点击修改，跳转到编辑页面，并且传递商品id参数
//跳转到修改页面，并携带id
$scope.toEditPage = function(id) {
location.href='goods_edit.html?id='+id;
};编辑页面引入服务
//定义品优购模块
var app=angular.module('shop',[]);
//引入$location解析配置
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);编辑页面初始化，查询回显商品
<body ng-app="shop" ng-controller="goodsController"
ng-init="selectOne();">```
控制器中通过$location服务获取需要回显商品的id，并调用服层，查询该商品
//在控制器中，引入$location服务
app.controller('goodsController', function($scope, goodsService,
itemCatService,$location) {
//在方法中通过$location服务，查询该商品进行回显
// 通过id查询商品的方法
$scope.selectOne = function() {
// 通过$location服务，获取跳转携带的参数id
var id = $location.search()["id"];
// 只有id存在执行后续代码
if (typeof (id) == 'undefined') {
return;
}
// 通过id查询商品
goodsService.selectOne(id).success(
function(data) {
$scope.entity = data;
// 获取tbGoodsDesc对象
var tbGoodsDesc = $scope.entity.tbGoodsDesc;
// 读取富文本框
editor.html(tbGoodsDesc.introduction);
// 读取图片
$scope.entity.tbGoodsDesc.itemImages = JSON
.parse($scope.entity.tbGoodsDesc.itemImages);
// 解析扩展属性
$scope.entity.tbGoodsDesc.customAttributeItems = JSON
.parse($scope.entity.tbGoodsDesc.customAttributeItems);
// 解析规格属性
$scope.entity.tbGoodsDesc.specificationItems = JSON
.parse($scope.entity.tbGoodsDesc.specificationItems);
// 解析spec规格属性
parseSpec();
})
};
// 解析spec属性规格属性的方法
parseSpec = function() {
for (var i = 0; i < $scope.entity.itemList.length; i++) {
$scope.entity.itemList[i].spec = JSON
.parse($scope.entity.itemList[i].spec);
}
};
}三、checkbox、选项的回显
页面
<div ng-repeat="pojo in specList">
<div class="col-md-2 title">{{pojo.text}}</div>
<div class="col-md-10 data">
<!--
ng-repeat="option in pojo.options" : 循环对应规格选项列表
{{option.optionName}} ： 显示每个选项的名称
ng-click：点击调用方法
修改规格选项的属性
updateSpecAttribute($event,pojo.text,option.optionName);
通过规格选项对象，动态创建sku列表
createSKUTable();
ng-checked="checkAttributeValue(pojo.text,option.optionName)":
ng-ckecked：如果值有true，为选中
值为false， 不选中
调用方法checkAttributeValue，将选项名称pojo.text，和选项的值option.optionName传入，
判断是否选中，返回布尔值
-->
<span ng-repeat="option in pojo.options"> <input
ng-checked="checkAttributeValue(pojo.text,option.optionName)"
ng-click="updateSpecAttribute($event,pojo.text,option.optionName);
createSKUTable();"
type="checkbox"> {{option.optionName}}
</span>
</div>
</div>控制器方法
//读取回显数据，选中规格属性
$scope.checkAttributeValue=function(specName,optionName){
var specItems =$scope.entity.tbGoodsDesc.specificationItems;
//遍历规格
for(var i =0;i<specItems.length;i++){
//判断规格数组中的规格名称，和该checkbox的规格名称相同
if(specName==specItems[i].attributeName){
//判断该规格选项值的数组中是否有该值，如果有返回true，选中
if(specItems[i].attributeValue.indexOf(optionName)>=0){
return true;
};
};
};
//否则，不选中
return false;
};