AngularJS(十二) json数据解析、ng-if、ng-repeat使用等

一、前端代码

数据库：数据结构

id ：40  主键
name：电冰箱
brand_ids :[{"id":13,"text":"长虹"},{"id":14,"text":"海尔"},{"id":21,"text":"康佳"}]
spec_ids : [{"id":37,"text":"重量"},{"id":38,"text":"容量"}]
custom_attribute_items ：[{"text":"颜色"},{"text":"容量"}]

    // 监控模版id变化，查出品牌列表,规格列表，其他列表，
    // 并将数据库保存的json字符串解析成对象,供页面进行展示
    $scope.$watch('entity.tbGoods.typeTemplateId', function(newValue, oldValue) {
        typeTemplateService.selectOne(newValue).success(function(data) {
            $scope.typeTemplate = data;
            // JSON.parse():将字符串解析为js对象
            // 格式化品牌列表 
            $scope.typeTemplate.brandIds = JSON.parse($scope.typeTemplate.brandIds);

            // 格式化扩展属性列表
            if(typeof($location.search()['id'])=='undefined'){
                $scope.entity.tbGoodsDesc.customAttributeItems = JSON.parse($scope.typeTemplate.customAttributeItems);
                }

          })
        var id = newValue;

        // 查询规格的数据
        typeTemplateService.findSpecList(id).success(function(data){
              $scope.specList=data;
          });

    });

二、服务端代码

通过规格查询规格选项的方法

   /**
     * 业务层代码
     * 通过模版id查询规格及规格选项
     * 
     */
    public List<Map> findSpecList(Long id) throws Exception {
        try {
            //通过模版id查询出该条模版数据
            TbTypeTemplate typeTemplate = typeTemplateMapper.selectByPrimaryKey(id);
            //获取规格属性数据
            String specIds = typeTemplate.getSpecIds();
            //将数据库规格属性的JSON数据转换成数组对象
            List<Map> specList = JSON.parse(specIds,List.class);
            //循环数组获取每个对象
            for (Map map : specList) {
                //构造以规格id为条件的条件查询对象
                TbSpecificationOptionExample example = new TbSpecificationOptionExample();
                com.pyg.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();
                criteria.andSpecIdEqualTo((Long)map.get("id"));
                //通过规格id查询出规格选项
                List<TbSpecificationOption> options = specificationOptionMapper.selectByExample(example);
                //将规格选项数据，出入该条规格中作为该规格的规格选项属性
                map.put("options", options);
            }

            return specList;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    };

三、页面html代码

品牌属性：

    <div class="col-md-2 title">品牌</div>
    <div class="col-md-10 data">
        <select ng-model="entity.tbGoods.brandId"
            ng-options="item.id as item.text for item in typeTemplate.brandIds"
            class="form-control"></select>
    </div>

扩展属性：

<div ng-repeat="pojo in entity.tbGoodsDesc.customAttributeItems">
    <div class="col-md-2 title">{{pojo.text}}</div>
    <div class="col-md-10 data">
     <input ng-model="pojo.value" class="form-control" placeholder="{{pojo.text}}">
    </div>
</div>

规格属性：

<!-- 

         ng-true-value="1" : 设定选中值为1
         ng-false-value="0" ：设定不选址值为0
         ng-model="entity.tbGoods.isEnableSpec" ： 将value值绑定到商品的isEnableSpec（是否启用规格）属性中
         ng-if：如果选中 展开显示该div，即展开列表
         ng-repeat="pojo in specList" : 循环规格列表，便利每个规格属性 
         {{pojo.text}} : 显示每个规格属性的名称
-->
    <input ng-model="entity.tbGoods.isEnableSpec" 
           ng-true-value="1"
           ng-false-value="0" 
           type="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}} ： 显示每个选项的名称
            -->
            <span ng-repeat="option in pojo.options"> 
               <input type="checkbox"> {{option.optionName}}
            </span>
        </div>
    </div>

模版：例如