报错:
分页插件换行
逻辑没有错,是css没有加载上,少了style
页面报404后台没有报错
web.xml没有配置
ng-app的作用
ng-app 指令 作用是告诉子元素以下的指令是归AngularJS 的,AngularJS 会识别的,比如在<tr>标签中添加ng-app后整个tr标签AngularJS 都会生效
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。只要元素发生变化会立即识别
ng-module的作用
ng-module指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量。
ng-model的作用
ng-model是用来定义变量,如ng-model="变量名"
ng-init的作用
我们如果希望有些变量具有初始值,可以使用ng-init指令来对变量初始化
ng-controller的作用
ng-controller用于指定所使用的控制器
$scope的作用
$scope 是一个上下文对象.$scope的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.把值放入$scope中后可以用 {{变量名}} 来获取存入的值
$http的作用
$index的作用
angularJs 在遍历以后,可以通过$index获取遍历的下标
用来请求对象,分为$http.get("url").success()和$http.post().success()
ng-click的作用
ng-click 是最常用的单击事件指令,再点击时触发控制器的某个方法
ng-repeat的作用
ng-repeat指令用于循环数组变量。
业务不能写在controller层,所以pageResult要放到service的实现类中,返回一个最终结果到controller层即可
分页插件代码
<!--
使用分页插件需要的步骤
1、引入分页的js css
2、定义模板(加入分页插件,即pagination)
3、在页面的下方需要引入分页功能
4、定义分页的属性
-->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<script type="text/javascript">
//定义一个angular模块,参数:模块名,插件
var app = angular.module("youlexuan",["pagination"]);
//$scope:上下文域对象,$http:请求对象
app.controller("brandController",function($scope,$http){
// 定义函数,获取后台数据,page==当前页,rows==每页的条数
$scope.findFenYe = function(page,rows){
//相当于ajax,http.get里面是url(...)等价于ajax的url:"...",success(function(...))相当于ajax的success:function(...)执行的函数,
//response是后台返回来的json字符串
$http.get("/brand/findFenYe?pageNum="+page+"&pageSize="+rows).success(function(response){
$scope.list = response.rows;//每页的所有数据的集合
//更新总条数
$scope.paginationConf.totalItems = response.total;
});
}
// 加载分页数据
$scope.reloadList = function(){
$scope.findFenYe($scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage);
}
//加载分页插件
$scope.paginationConf = {
currentPage: 1, // 当前页
totalItems:20, // 总条目,目前随便给的值,执行代码的时候汇通过$scope.paginationConf.totalItems = response.total;赋值
itemsPerPage:10, // 每页的数据
perPageOptions:[10,20,30,40],//选择每页显示的条数
onChange:function(){
// 重新加载页面,上面定义的函数是形参,这里给函数赋值实参,重新加载页面
$scope.reloadList();//重新加载页面
}
}
});
</script>
ng-app要定义在body标签中,还需要指定初始化函数,指定是哪一个controller
遍历放在需要遍历的tr标签上
@ResponseBody+@Controller=@RestController
什么时候属性前要加$scope.什么时候不需要?
AngularJS和html代码类似于一个类中的不同方法,要想使用就必须把它放到scope上下文作用域中,如果想不用$scope而直接使用属性,可以用var app = $scope.属性名,这类似于java类中的全局变量,整个类都可以直接使用
AngularJS中的entity对象
这是一个万能对象,双向绑定,我们可以在页面上任何需要对象的地方用entity,然后再js中 $scope.entity=对象名 把我们页面返回的对象的值赋值给entity,从而赋值给页面上的某些属性,也可以通过 $scope.entity.id 直接使用对象
查询所有和模糊查询可以写在一起
因为模糊查询条件没有是example为null,和直接写null是一个效果,所以可以写在一起
页面上怎么定义对象为空
使用$scope.searchEntity = {};因为传到后台的是json值形式是{"name":"hello","age":12, .....}这种json串的形式,所以定义对象为空使用{}
$event是什么?
$event代表事件,$event.target相当于this,this==$event.target, 在angularJs中,this指向$scope,但是可以$event配合使用$(event.target)实现,也就是说,要模拟jq的this指向,使用$event.target即可
push和splice方法
push是js中用来向数组中添加值的方法.splice是用来移除值的方法.
本知识点摘自:https://blog.csdn.net/bujiongdan/article/details/82800699
splice(index,len,[item])
它也可以用来替换/删除/添加数组内某一个或者几个值(该方法会改变原始数组)
index:数组开始下标
len: 替换/删除的长度
item:替换的值,删除操作的话 item为空
//删除起始下标为1,长度为1的一个值(len设置1,如果为0,则数组不变) var arr = ['a','b','c','d']; arr.splice(1,1); console.log(arr); //['a','c','d']; //删除起始下标为1,长度为2的一个值(len设置2) var arr2 = ['a','b','c','d'] arr2.splice(1,2); console.log(arr2); //['a','d'] 替换: //替换起始下标为1,长度为1的一个值为‘ttt’,len设置的1 var arr = ['a','b','c','d']; arr.splice(1,1,'ttt'); console.log(arr); //['a','ttt','c','d'] //替换起始下标为1,长度为2的两个值为‘ttt’,len设置的1 var arr2 = ['a','b','c','d']; arr2.splice(1,2,'ttt'); console.log(arr2); //['a','ttt','d'] 添加: //在下标为1处添加一项'ttt' var arr = ['a','b','c','d']; arr.splice(1,0,'ttt'); console.log(arr); //['a','ttt','b','c','d']