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

品牌属性：

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

模版：例如

文章来源: AngularJS(十二) json数据解析、ng-if、ng-repeat使用等