AngularJS
angularJS能实现双向绑定,框架自动创建对象并实现依赖注入,能够自定义模块进行模块化设计
1.ng-app 指令:作用是告诉子元素以下的指令是归angularJs的
2.表达式的写法是{{表达式}},表达式可以是变量或是运算式
<body ng-app>
{{100+100}} //运算 读取model变量
</body>
3.ng-model 指令用于绑定变量
4.ng-init指令来对变量初始化
<body ng-app ng-init="myname='XXX'" >
<input ng-model="myname" >
<br>
{{myname}}
</body>
5.自定义控制器
<script>
var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
//定义控制器
app.controller('myController',function($scope){
$scope.add=function(){
$scope.z= parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
<body>
<button ng-click="add()">运算</button>
//ng-click 是最常用的单击事件指令,再点击时触发控制器的某个方法
</body>
注意:$ scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新$ scope,同样的$ scope 发生改变时也会立刻重新渲染视图.
6.内置服务$http
<script>
var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
//定义控制器
app.controller('myController',function($scope,$http){
$scope.findAll=function(){
$http.get('localhost:8082/data.json').success(
function(reponse){
$scope.list=response;
}
);
}
});
</script>
<body>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</body>
实现分页
1.创建类PageResult 需实现序列化接口
private long total;//总记录数
private List rows;//当前页结果
2.在服务层使用PageHelper
@Override
public PageResult findPage(int pageNum, int pageSize) {
PageHelper.startPage(pageNum, pageSize);
// Page中封装了数据
Page<TbBrand> page= (Page<TbBrand>) Mapper.selectByExample(null);
return new PageResult(page.getTotal(), page.getResult());
}
3.构建app模块时引入pagination模块实现前端分页
var app=angular.module('pinyougou',['pagination']);//定义品优购模块
放在table标签下
<!-- 分页 -->
<tm-pagination conf="paginationConf"></tm-pagination>
script标签中
//重新加载列表 数据
$scope.reloadList=function(){
//切换页码
$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}
//分页控件配置
$scope.paginationConf = {
currentPage: 1,
totalItems: 10,
itemsPerPage: 10,
perPageOptions: [10, 20, 30, 40, 50],
onChange: function(){
$scope.reloadList();//重新加载
}
};
//分页
$scope.findPage=function(page,rows){
$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}
注意:绑定表单元素,我们用ng-model指令,绑定按钮的单击事件用ng-click
对entity变量进行清空操作
ng-click="entity={}"
实现修改
1.JS中,通过前端传入的id查找到需要修改的实体,将其赋值给entity
$scope.findOne=function(id){
$http.get('../brand/findOne.do?id='+id).success(
function(response){
$scope.entity= response;
}
);
}
2.将查找到的entity传给前端显示页面和save方法,实现修改
$scope.save=function(){
$http.post('../brand/save.do',$scope.entity ).success(
function(response){
if(response.success){
//重新查询
$scope.reloadList();//重新加载
}else{
alert(response.message);
}
}
);
}
实现多个删除
JS的关于数组操作的知识
(1)数组的push方法:向数组中添加元素
(2)数组的splice方法:从数组的指定位置移除指定个数的元素 ,参数1为位置 ,参数2位移除的个数
(3)复选框的checked属性:用于判断是否被选中
$scope.selectIds=[];//选中的ID集合
//更新复选
$scope.updateSelection = function($event, id) {
if($event.target.checked){ //如果是被选中,则增加到数组
$scope.selectIds.push( id);
}else{
var index = $scope.selectIds.indexOf(id);
$scope.selectIds.splice(index, 1); //删除
}
}
//批量删除
$scope.dele=function(){
//获取选中的复选框
$http.get('../brand/delete.do?ids='+$scope.selectIds).success(
function(response){
if(response.success){
$scope.reloadList(); //刷新列表
}
}
);
}
html还需要修改列表的复选框 加上$event
<input type="checkbox" ng-click="updateSelection($event,entity.id)">
实现条件分页查询
后端需传入实体类进行模糊查询
JS代码:
$scope.searchEntity={};//定义搜索对象
//条件查询 + 分页数据
$scope.search=function(page,rows){
$http.post('../brand/search.do?page='+page+"&rows="+rows, $scope.searchEntity).success(
function(response){
$scope.paginationConf.totalItems=response.total;//总记录数
$scope.list=response.rows;//给列表变量赋值
}
);
}
修改刷新代码
//刷新列表
$scope.reloadList=function(){
$scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}