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);}}

angularjs技术相关推荐

AngularJS 技术总结
学习AngularJS,并且能在工作中使用到,算是很幸运了.因此本篇也会搜集各种资料,进行分享. 书籍分享 AngularJS权威指南常用链接 AngularJS API文档 AngularJS 用 ...
【华为云技术分享】三大前端技术(React,Vue,Angular)探密（下）
[华为云技术分享]三大前端技术(React,Vue,Angular)探密(上) [Angular] Angular(通常被称为 "Angular 2+"或 "Angula ...
视频教程-AngularJS基础入门视频课程-AngularJS
AngularJS基础入门视频课程南京大学软件工程硕士,全栈开发工程师,全栈讲师. 曾就职于中软国际.擎天科技.华为等公司,擅长Java开发.Web前端.Python爬虫.PHP等领域技术.从事软件 ...
创业思维 - MikeCRM的故事
MikeCRM是一家2013年成立的创业公司,网址是www.mikecrm.com. MikeCRM为何打动我知道这个网站是个很偶然的机会,2014年初,我偶尔在搜索邮件营销方面的技术解决方案发现了 ...
统一Portal门户和IAM平台（单点登录、统一用户资源和权限管理）实践
一.背景和目的解决如下问题: 打通所有系统的账户密码,只需要记住一个就行,而且登录一个系统后,打开其他系统不需要再登录. 不需要记住多个系统的地址,甚至不需要在多个系统页面跳来跳去,通过一个门户网站 ...
基于HTML5+CSS+JacaScript和Java实现的校园校友APP前后台实现
目录摘要 I Abstract II 第1章绪论 1 1.1研究背景和意义 1 1.1.1移动终端发展势头持续强劲 1 1.1.2高校校园数字化建设步伐加快 2 1.2 研究现状 2 1.2. ...
挖掘机配件营销中心销售系统的设计与实现（开题报告+论文+PPT+源码）
开题报告论文(设计)题目华柳挖掘机配件营销中心销售系统的设计与实现学生姓名专业计算机科学与技术指导教师选题目的和意义:随着经济的发展和中国汽车市场的不断扩大,汽车款式的不断更新,零配件种 ...
收集的计算机编程电子书目录，仅供日后查阅方便
本人有收集电子书的癖好.每日在网上收集经典的电子书籍,尤其喜欢原版的,看起来舒服.不过总是心血来潮,当时下载后瞅几眼,之后就束之高阁,再也不问津了.很为此苦恼,过后找某本书时也总是不知道在哪,为了查找 ...
Java实现lucene搜索功能
直接上代码: package com.sand.mpa.sousuo;//--------------------- Change Logs---------------------- //<p ...
SegmentFault 技术周刊 Vol.17 - 听说你还没用上 AngularJS
如何在网页上构建动态应用,通常的解决方案是使用类库和框架,来弥补原生 JS 和 HTML 的不足,实现具体的应用逻辑,如典型的 jQuery.knockout.js 等.而 Google 则直接尝试从 ...

angularjs技术

五大事件

引入angularjs，使用angularjs语法

引入pagination分页插件

定义一个APP

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

在控制器中编写一个方法

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

分页

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

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

angularjs技术相关推荐

最新文章

热门文章