angularjs技术

angularjs技术angularjs第一天五大事件1、绑定事件,ng-model;2、绑定对应的控制器,ng-controller;3、绑定对应的APP,ng-app;4、单击事件,ng-click;5、初始化事件,ng-init;引入angularjs,使用angularjs语法<scriptsrc="…/plugins/angularjs/angular.min.js"type=…


Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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.net/164216.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • vs2013下载及安装教程_VS2012

    vs2013下载及安装教程_VS2012对于编程人员,vs2013是一款不错的软件,可以开发java,c#,c++,功能强大,下面我就为大家讲讲如何让下载与安装方法:1.官方下载地址http://download.microsoft.com/download/9/3/E/93EA27FF-DB02-4822-8771-DCA0238957E9/vs2013.5_ult_chs.

    2022年9月11日
  • DirectSound的应用

    DirectSound的应用

    2021年11月14日
  • vuecli3配置webpack_vue不混淆如何配置

    vuecli3配置webpack_vue不混淆如何配置前言如果我们想在webpack中使用vue,就需要在webpack中配置vue配置vue首先,我们需要在项目中安装vue,安装命令如下:npminstallvue–save安装完成后

    2022年7月29日
  • 面试问题spring cloud和dubbo的区别[通俗易懂]

    面试问题spring cloud和dubbo的区别[通俗易懂]最近一段时间不论互联网还是传统行业,凡是涉及信息技术范畴的圈子几乎都在讨论微服务架构 。近期也看到各大技术社区开始组织一些沙龙和论坛来分享spring Cloud的相关实施经验,这对于最近正在整理SpringCloud相关套件内容与实例应用的我而言,还是有不少激励的。目前,SpringCloud在国内的知名度并不高,在前阵子的求职过程中,与一些互联网公司的架构师、技术VP或者CT

    2022年6月3日
  • mysql 字符串转数字再排序

    mysql 字符串转数字再排序如果数字是按照字符串格式存储的排序时候又想按照数字排血 只需要在orderby后加上转换函数即可例如: orderby CONVERT(sort,DECIMAL)可用的类型    二进制,同带binary前缀的效果:BINARY   字符型,可带参数:CHAR()    日期:DATE    时间:TIME    日期时间

    2022年5月7日
  • 2020美赛A题解题方法

    2020美赛A题解题方法题目:问题A:向北移动全球海洋温度影响某些海洋生物的栖息地质量。当温度变化太大,它们无法继续繁荣时,这些物种就会迁移到其他更适合它们现在和未来生活和繁殖成功的栖息地。其中一个例子就是美国缅因州的龙虾种群,它们正缓慢地向北迁移到加拿大,那里的海洋温度较低,为它们提供了更合适的栖息地。这种地理种群的转移可能会严重影响依赖海洋生物稳定性的公司的生计。您的团队已被苏格兰北大西洋渔业管理协会聘请为顾问…

    2022年6月1日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号