项目笔记Learn03

AngularJS的MVC模式

$ controller也是angular提供的一个服务，可以实现伪继承，实际上就是与BaseController共享$scope

app.controller('baseController' ,function($scope){	
....
}

brandController传参，进行共享

app.controller('brandController' ,function($scope,$controller,brandService){	
	$controller('baseController',{$scope:$scope});//继承
	...
});	

列表新增行实现

1.修改js（push添加空的记录到数组中)

      //新增选项行
	$scope.addTableRow=function(){	
		$scope.entity.specificationOptionList.push({});		
	}

2.修改html

绑定按键

<button type="button" class="btn btn-default" title="新建"  ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新建</button>

循环列表行，绑定表格内的编辑框

<tr ng-repeat="pojo in entity.specificationOptionList">
         <td><input  type="checkbox"></td> 
	<td>
	<input ng-model="pojo.optionName" class="form-control" placeholder="规格选项"> 
	</td>
	
	<td>
	<input ng-model="pojo.orders" class="form-control" placeholder="排序"> 
	</td>
</tr>

要修改.html “新建”按钮，弹出窗口时对entity进行初始化，否则向集合添加数据时会报错！

<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={'specificationOptionList':[]}"><i class="fa fa-file-o"></i> 新建</button>

列表删除行实现

1.修改js（splice数组中删除记录)

//批量选项删除 
	$scope.deleTableRow=function(index){			
			//index为标识，1表示要删除的行数
		$scope.entity.specificationOptionList.splice(index,1);//删除			
	} 

2.修改每行的删除按钮，$index 用于获取ng-repeat指令循环中的索引

<button type="button" class="btn btn-default" title="删除"  ng-click="deleTablenRow($index)"><i class="fa fa-file-o"></i> 删除</button>

实现多个数据合并为一个对象进行提交保存和删除

1. 提交保存

修改Mapper.xml ，在insert节点后添加配置得到id，将id传入另一个关联的数据中

<insert id="insert" parameterType="com.pinyougou.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>

建立组合实体类，前端将表单中要传入的数据进行ng-model绑定，一起提交到后端

在插入数据前将id值设置进去，实现一起提交

@Override
	public void add(Specification specification) {	
		specificationMapper.insert(specification.getSpecification());//插入规格	
		//循环插入规格选项
		for(TbSpecificationOption specificationOption:specification.getSpecificationOptionList()){	specificationOption.setSpecId(specification.getSpecification().getId());//设置规格ID		specificationOptionMapper.insert(specificationOption);		
		}		
	}

绑定保存按钮事件

<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>

2.删除

需要将关联的对象同时删除
后端代码

@Override
	public void delete(Long[] ids) {
		for(Long id:ids){
			// 1
			specificationMapper.deleteByPrimaryKey(id);		
		    // 2
			//删除原有的规格选项		
			TbSpecificationOptionExample example=new TbSpecificationOptionExample();
			com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();
			criteria.andSpecIdEqualTo(id);//指定规格ID为条件
			specificationOptionMapper.deleteByExample(example);//删除
		}		
	}

前端代码

列表的复选框（传入$event和id，实现多个删除）

<input  type="checkbox" ng-click="updateSelection($event,entity.id)">

删除按钮

<button type="button" class="btn btn-default" title="删除" ng-click="dele()" ><i class="fa fa-trash-o"></i> 删除</button>

SELECT2

（1）修改.html 引入JS

 <link rel="stylesheet" href="../plugins/select2/select2.css" />
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/angular-select2.js">  </script>

（2）修改.js ，定义品牌列表数据（此时data中是json类型的数据）

$scope.brandList={data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'小米'}]};//品牌列表

（3）在type_template.html 用select2组件实现多选下拉框

<input select2  select2-model="entity.brandIds" config="brandList" multiple placeholder="选择品牌（可多选）" class="form-control" type="text"/>

multiple 表示可多选
Config 用于配置数据来源
select2-model 用于指定用户选择后提交的变量

JSON和字符串的相互转化

//查询实体 
	$scope.findOne=function(id){				
		typeTemplateService.findOne(id).success(
			function(response){
				$scope.entity= response;	
		      //JSON.stringify(obj); JSON.stringify(json对象) ---〉字符串！
				$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对象才能实现信息的回显。

一个json字符串中某个属性的值提取出来，用逗号拼接成一个新的字符串，这样的功能比较常用

//提取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[i][key];			
	}
	return value;
}

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

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