Stage4-day02-AngularJS+分页插件的使用

报错:

分页插件换行

逻辑没有错,是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'] 

猜你喜欢

转载自blog.csdn.net/qq_42837554/article/details/91878321