angularjs技术

大家好，又见面了，我是你们的朋友全栈君。

angularjs第一天

五大事件

1、绑定事件 ，ng-model； 2、绑定对应的控制器，ng-controller； 3、绑定对应的APP，ng-app； 4、单击事件，ng-click； 5、初始化事件,ng-init；

引入angularjs，使用angularjs语法

< script src=”…/plugins/angularjs/angular.min.js” type=“text/javascript”> </ script>

引入pagination分页插件

< script src=”…/plugins/angularjs/pagination.js” type=“text/javascript”> </ script> < link rel=“stylesheet” href=”…/plugins/angularjs/pagination.css”/>

定义一个APP

var app = angular.module(‘pinyougou’,[‘pagination’]);

定义一个控制器，在其控制器中可编写方法，$scope可指代网页中的任何一个元素, $http是angularjs内置的方法，前后端分离，可调用后台方法

app.controller(‘brandController’,function(scope, http){}

在控制器中编写一个方法

$scope.searchTbBrandEntity = function(){

			$http.post('../brand/searchTbBrandEntity.do?currentPage='+$scope.paginationConf.currentPage+'&pageSize='+$scope.paginationConf.itemsPerPage,$scope.searchEntity).success(
					function(response){
						$scope.entity = response.rows;
						$scope.paginationConf.totalItems = response.totalSize;
					}
			);
		}

在此方法中，采用的是post请求，success方法代表的是调用成功之后执行的操作

分页

< tm-pagination conf=“paginationConf”></ tm-pagination>

分页所需引用的方法，onchange事件代表的是当值发生改变后调用的方法

scope.paginationConf = { currentPage: 1, totalItems: 10, itemsPerPage: 10, perPageOptions: [10, 20, 30, 40, 50], onChange: function(){ scope.reloadfindByPage(); } }

多选，首先在文档中定义一个数组/集合，然后利用对应的$event事件获取到其获取的复选框,判断是否为选中状态，对其进行不同操作

$scope.selectedIds = [];

		$scope.getMultiCheckBox = function($event,id){
			
			if($event.target.checked){
				$scope.selectedIds.push(id);
			}else{
				var index = $scope.selectedIds.indexOf(id);
				$scope.selectedIds.splice(index,1);
			}
			
		}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/164216.html原文链接：https://javaforall.cn