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=…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Android开发——RelativeLayout.LayoutParams的使用「建议收藏」

    Android开发——RelativeLayout.LayoutParams的使用「建议收藏」前言在日常的Android开发当中,我们少不了需要动态改变控件在RelativeLayout界面的位置。那么我们就需要使用到RelativeLayout.LayoutParams。RelativeLayout.LayoutParamsRelativeLayout.LayoutParams是一个RelativeLayout的布局参数,我们改变控件的就需要使用到。初始化//包裹内容Rel…

    2022年7月17日
    26
  • ES6模板字符串`的引用

    ES6模板字符串`的引用传统的JavaScript语言,输出模板通常是这样写的(下面使用了jQuery的方法)。$(‘#result’).append(‘Thereare<b>’+basket.count+'</b>’+’itemsinyourbasket,’+'<em>’+basket.onSale+'</em>areonsale!’);上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。

    2022年8月21日
    14
  • Java多线程系列–“JUC锁”09之 CountDownLatch原理和示例

    Java多线程系列–“JUC锁”09之 CountDownLatch原理和示例概要前面对"独占锁"和"共享锁"有了个大致的了解;本章,我们对CountDownLatch进行学习。和ReadWriteLock.ReadLock一样,Coun

    2022年7月4日
    26
  • 一个好玩的小游戏(纯C语言编写)

    一个好玩的小游戏(纯C语言编写)最近在看知乎是发现了一个这一个专栏https://zhuanlan.zhihu.com/c2game从中获取的许多知识,本文中的游戏也是从里面学到的,不过本人又自己加了一些功能。这是一个类似于飞机大战的游戏,不过目前代码量比较小,所以看起来非常简陋游戏界面如下更新日志,本人将原来的原来的代码有进一步的优化了一下,之前是只有一个非常小的战机现在更新后可以产生一个非常大的战机(看起来也更

    2022年5月19日
    44
  • xshell下载安装教程_xshell命令连接ip

    xshell下载安装教程_xshell命令连接ipxshell下载链接:  http://www.netsarang.com/download/free_license.html         现今软件市场上有很多终端工具,比如:secureCRT、Putty、telnet、xshell\等等。secureCRT是一款很强大的终端工具,但是,它毕竟是收费软件,在公司里不允许使用。而且在自己的电脑里一旦输入大写,整个界面就乱了(原因未知,未…

    2022年9月10日
    1
  • fwrite和fread函数的用法小结_fwrite和fread

    fwrite和fread函数的用法小结_fwrite和fread1.函数功能用来读写一个数据块。2.一般调用形式fread(buffer,size,count,fp);fwrite(buffer,size,count,fp);3.说明(1)buffer:是一个指针,对fread来说,它是读入数据的存放地址。对fwrite来说,是要输出数据的地址。(2)size:要读写的字节数;(3)count:要

    2025年9月16日
    5

发表回复

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

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