AngularJS复选框
如何将id和复选框的勾选绑定起来？
<td><input type="checkbox" ng-click="updateSelection($event,entity.id)"></td>
// 定义一个数组:
$scope.selectIds = [];
// 更新复选框：
$scope.updateSelection = function($event,id){
// 复选框选中
if($event.target.checked){
// 向数组中添加元素
$scope.selectIds.push(id);
}else{
// 从数组中移除
var idx = $scope.selectIds.indexOf(id);
$scope.selectIds.splice(idx,1);
}
}
AngularJS分层开发
作用：
- 使js的代码部分不会出现在html中，使得代码臃肿（代码分离）
- 代码复用
分层：
- service：发送ajax请求，到后台取数据
- baseController（父控制器）：写公共业务
- xxxController（子控制器）：写具体模块的业务，调用service
示例：使用引入js文件的方式
<script type="text/javascript" src="../js/base_pagination.js"></script>
<script type="text/javascript" src="../js/controller/baseController.js"></script>
<script type="text/javascript" src="../js/controller/brandController.js"></script>
<script type="text/javascript" src="../js/service/brandService.js"></script>
$controller: 这个是angularjs中的内置对象, 用来做控制器继承使用 这里是伪继承, 继承后, 子controller就可以调用父级controller里面的方法, 继承后, 子controller和父controller里面的$scope域中的数据共享.
$controller('baseController',{$scope:$scope});是继承父控制器语法
{$scope:$scope}作用是让当前控制器中$scope域中的数据和父级$scope域中的数据共享, 可以随便使用
示例：brandController继承baseController（伪继承）
baseController.js
app.controller("baseController",function($scope){
// 分页的配置的信息
$scope.paginationConf = {
currentPage: 1, // 当前页数
totalItems: 10, // 总记录数
itemsPerPage: 10, // 每页显示多少条记录
perPageOptions: [10, 20, 30, 40, 50],// 显示多少条下拉列表
onChange: function(){ // 当页码、每页显示多少条下拉列表发生变化的时候，自动触发了
$scope.reloadList();// 重新加载列表
}
};
$scope.reloadList = function(){
// $scope.findByPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
$scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}
// 定义一个数组:
$scope.selectIds = [];
// 更新复选框：
$scope.updateSelection = function($event,id){
// 复选框选中
if($event.target.checked){
// 向数组中添加元素
$scope.selectIds.push(id);
}else{
// 从数组中移除
var idx = $scope.selectIds.indexOf(id);
$scope.selectIds.splice(idx,1);
}
}
// 定义方法：获取JSON字符串中的某个key对应值的集合
$scope.jsonToString = function(jsonStr,key){
// 将字符串转成JSOn:
var jsonObj = JSON.parse(jsonStr);
var value = "";
for(var i=0;i<jsonObj.length;i++){
if(i>0){
value += ",";
}
value += jsonObj[i][key];
}
return value;
}
});
brandController.js
// 定义控制器:
app.controller("brandController",function($scope,$controller,$http,brandService){
// AngularJS中的继承:伪继承
$controller('baseController',{$scope:$scope});
// 查询所有的品牌列表的方法:
$scope.findAll = function(){
// 向后台发送请求:
brandService.findAll().success(function(response){
$scope.list = response;
});
}
// 分页查询
$scope.findByPage = function(page,rows){
// 向后台发送请求获取数据:
brandService.findByPage(page,rows).success(function(response){
$scope.paginationConf.totalItems = response.total;
$scope.list = response.rows;
});
}
// 保存品牌的方法:
$scope.save = function(){
// 区分是保存还是修改
var object;
if($scope.entity.id != null){
// 更新
object = brandService.update($scope.entity);
}else{
// 保存
object = brandService.save($scope.entity);
}
object.success(function(response){
// {success:true,message:xxx}
// 判断保存是否成功:
if(response.success==true){
// 保存成功
alert(response.message);
$scope.reloadList();
}else{
// 保存失败
alert(response.message);
}
});
}
// 查询一个:
$scope.findById = function(id){
brandService.findById(id).success(function(response){
// {id:xx,name:yy,firstChar:zz}
$scope.entity = response;
});
}
// 删除品牌:
$scope.dele = function(){
brandService.dele($scope.selectIds).success(function(response){
// 判断保存是否成功:
if(response.success==true){
// 保存成功
// alert(response.message);
$scope.reloadList();
$scope.selectIds = [];
}else{
// 保存失败
alert(response.message);
}
});
}
$scope.searchEntity={};
// 假设定义一个查询的实体：searchEntity
$scope.search = function(page,rows){
// 向后台发送请求获取数据:
brandService.search(page,rows,$scope.searchEntity).success(function(response){
$scope.paginationConf.totalItems = response.total;
$scope.list = response.rows;
});
}
});
brandService
// 定义服务层:
app.service("brandService",function($http){
this.findAll = function(){
return $http.get("../brand/findAll.do");
}
this.findByPage = function(page,rows){
return $http.get("../brand/findByPage.do?page="+page+"&rows="+rows);
}
this.save = function(entity){
return $http.post("../brand/save.do",entity);
}
this.update=function(entity){
return $http.post("../brand/update.do",entity);
}
this.findById=function(id){
return $http.get("../brand/findById.do?id="+id);
}
this.dele = function(ids){
return $http.get("../brand/delete.do?ids="+ids);
}
this.search = function(page,rows,searchEntity){
return $http.post("../brand/search.do?page="+page+"&rows="+rows,searchEntity);
}
this.selectOptionList = function(){
return $http.get("../brand/selectOptionList.do");
}
});
获取自增的主键
在执行完成添加操作之后，如何获取执行完成的那行数据的主键？
在配置文件中添加属性
useGeneratedKeys="true"，主键是否为自增？true为是keyProperty="id"， 获取自增后的主键，把他赋给参数Specification的id属性中
<insert id="insertSelective" parameterType="cn.itcast.core.pojo.specification.Specification"
useGeneratedKeys="true" keyProperty="id">
如以下，添加完成规格之后，可以在原先的对象中获取到id值，然后设置外键
@Override
public void add(SpecEntity specEntity) {
//1.添加规格
specificationDao.insertSelective(specEntity.getSpecification());
//2.添加规格选项
if(specEntity.getSpecificationOptionList()!=null){
for (SpecificationOption option : specEntity.getSpecificationOptionList()) {
option.setSpecId(specEntity.getSpecification().getId());
specificationOptionDao.insertSelective(option);
}
}
}
模板表的设计
此时的品牌表与规格表为多对多的关系
如何来设计模板表？
直接存储json数据，而不是外键（此方法适用于经常用于查询操作的表）
- 优点：查询快
- 缺点：添加和修改操作速度减慢
在前端页面，将json转换成需要的数据
定义方法
// 定义方法：获取JSON字符串中的某个key对应值的集合
$scope.jsonToString = function(jsonStr,key){
// 将字符串转成JSOn:
var jsonObj = JSON.parse(jsonStr);
var value = "";
for(var i=0;i<jsonObj.length;i++){
if(i>0){
value += ",";
}
value += jsonObj[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" ng-click="findOne(entity.id)" data-toggle="modal" data-target="#editModal" >修改</button>
</td>
</tr>