2025年angularjs技术

angularjs技术angularjs 第一天 五大事件 1 绑定事件 ng model 2 绑定对应的控制器 ng controller 3 绑定对应的 APP ng app 4 单击事件 ng click 5 初始化事件 ng init 引入 angularjs 使用 angularjs 语法 引入 pagination 分页插件 定义一个 APP var app

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”>

引入pagination分页插件

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

< 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”>

分页所需引用的方法,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);
}

}

编程小号
上一篇 2025-03-19 16:51
下一篇 2025-09-05 22:01

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/hz/140609.html