版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/QuietHRH/article/details/83034256
前后端交互中 json格式一定要清晰
后端→前端 javaBean→json字符串→json对象
前端→后端 json对象→json字符串→javabean
1.json数组
定义一个json对象时,首先考虑json是对象还是对象数组
是对象的话 var json={}
是数组的话 var json=[]
$scope.entity.specificationOptionList=[];
//新增选项行
$scope.addTableRow=function () {
$scope.entity.specificationOptionList.push({});
}
angularJs中 $index用于获取ng-repeat指令循环中的索引( 下标 )
2.dao层添加操作后主键回显
例如: 在业务逻辑中,得到组合对象中的规格和规格选项列表,插入规格返回规格ID,然后循环插入规格选项。
<insert id="insert" parameterType="com.pyg.pojo.TbSpecification" >
<selectKey resultType="java.lang.Long" order="AFTER" keyProperty="id">
SELECT LAST_INSERT_ID() AS id
</selectKey>
insert into tb_specification (id, spec_name)
values (#{id,jdbcType=BIGINT}, #{specName,jdbcType=VARCHAR})
</insert>
3.select2
select2是基于angularJs的 使用时需要有angualar中的模块( module )
所以引入js文件时 应该在模块js后引入
select2是一个可以多选的下拉框
select2中所需参数时json对象,而不是json字符串,所以在使用时要将后端传来的数据转化成json对象
例如: JSON.parse($scope.entity.brandIds);
底层: js中的 eval(); 缺点: js有可能认为这个对象是一个代码块
js优化: eval("("+jsonString+")")
$scope.brandList={data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'小米'}]};//品牌列表
<input select2 select2-model="entity.brandIds" config="brandList" multiple placeholder="选择品牌(可多选)" class="form-control" type="text"/>
multiple 表示可多选
Config用于配置数据来源
select2-model用于指定用户选择后提交的变量
4.json字符串解析
{data:[{id:1,text:‘联想’},{id:2,text:‘华为’},{id:3,text:‘小米’}]};
<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>
<!--entity.brandIds 是一个类似上面的 json字符串-->
<td>{{jsonToString(entity.brandIds,'text')}}</td>
<td>{{jsonToString(entity.specIds,'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>
$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;
}