一:angularJs的事件。

1.ng-click指令定义了AngularJS点击事件。

<div ng-app="myapp" ng-controller="myctrl">
<button ng-click="count=count+1">点赞</button>
<h1><span style="color:'red">♥</span>{{count}}</h1>
</div>
<script type="text/javascript">
angular.module('myapp',[]).controller('myctrl',function ($scope) {
$scope.count=0;
})
</script>

2.angularJs的事件方法

<div ng-app="mapp" ng-controller="mctrl">
<input type="button" ng-click="toggle()" value="显示/隐藏">
<div ng-show="hhh">
你的大名:<input type="text" ng-model="uname"><br>
你的称呼:<input type="text" ng-model="usex"><br>
<h1>{{uname+usex}}</h1>
</div>
</div>
<script language="javascript">
var app=angular.module("mapp",[]);
app.controller("mctrl",function($scope){
$scope.uname=“黄袍怪";
$scope.usex="妖";
$scope.hhh=true;
$scope.toggle=function(){
$scope.hhh= !$scope.hhh;
}
})
</script>

二:下面列一些angularJs常用的事件。

·ng-mousedown 鼠标按下
·ng-mouseup鼠标按下弹起
·ng-mouseenter鼠标进入
·ng-mouseleave鼠标离开
·ng-mousemove鼠标移动
·ng-mouseover鼠标进入

·ng-dblclick双击事件
·ng-blur 失去焦点事件
·ng-focus获取焦点
·ng-change更新model
·ng-copy 复制 ctrl+c
·ng-paste 粘贴 ctrl+v
·ng-keydown:键盘按下

三:angularJs过滤器。

AngularJS 过滤器可用于转换数据:
格式化数字为货币格式:currency
从数组项中选择一个子集:filter
格式化字符串为小写: lowercase
根据某个表达式排列数组:orderBy:’列名’
默认是从小到大排序,如果想从大到小排序,只需在列名前加 – 号
 显示前几条: limitTo:3
如:<li ng-repeat=“x in student | orderBy:’uage’ | limitTo:3”>{{x.sname}}</li>
格式化字符串为大写:uppercase

实例:{{ uname | uppercase }}

四:angularJs服务(service)

AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务

$location  服务 。 
$http 服务。
$timeout 服务。
$interval 服务。
创建自定义服务。

AngularJs之五的更多相关文章

  1. 如何用angularjs制作一个完整的表格之五__完整的案例

    由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...

  2. 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  3. AngularJs之九(ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  4. AngularJS过滤器filter-保留小数,小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  5. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  6. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  7. 步入angularjs directive(指令)--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  8. 玩转spring boot——结合AngularJs和JDBC

    参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...

  9. 玩转spring boot——结合jQuery和AngularJs

    在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

随机推荐

  1. redux-amrc:用更少的代码发起异步 action

    很多人说 Redux 代码多,开发效率低.其实 Redux 是可以灵活使用以及拓展的,经过充分定制的 Redux 其实写不了几行代码.今天先介绍一个很好用的 Redux 拓展-- redux-amrc ...

  2. 微软Azure 经典模式下创建内部负载均衡(ILB)

    微软Azure 经典模式下创建内部负载均衡(ILB) 使用之前一定要注意自己的Azure的模式,老版的为cloud service模式,新版为ARM模式(资源组模式) 本文适用于cloud servi ...

  3. pt-pmp

    pt-pmp有两方面的作用:一是获取进程的堆栈信息,二是对这些堆栈信息进行汇总. 进程的堆栈信息是利用gdb获取的,所以在获取的过程中,会对mysql服务端的性能有一定的影响. 用官方的话说: Thi ...

  4. javascript运动系列第一篇——匀速运动

    × 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体[9]回调[10]函数完善[11]最终函数 前面的话 除了拖拽以外,运动也是j ...

  5. DOM的小练习,两个表格之间数据的移动

    本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head>   <meta http-equiv="Content-Type" ...

  6. 如何搭建git服务器

    一.前言 现在越来越多的公司用git进行版本控制,不过git是默认是开源的,如果私有的话是需要付费的,如果不想付费自己可以搭建一个git服务器用来版本控制. 二.服务器端操作 1.安装git sudo ...

  7. 在Linux虚拟机下配置jdk的环境变量

    1.到Oracle公司的官网里下载好jdk,网址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133 ...

  8. WebAPI 2参数绑定方法

    简单类型参数 Example 1: Sending a simple parameter in the Url [RoutePrefix("api/values")] public ...

  9. osi(open system interconnection)模型的通俗理解

    OSI模型的理解: 以你和你女朋友以书信的方式进行通信为例. 1.物理层:运输工具,比如火车.汽车. 2.数据链路层:相当于货物核对单,表明里面有些什么东西,接受的时候确认一下是否正确(CRC检验). ...

  10. SQL Server2014 SP2关键特性

    SQL Server2014 SP2关键特性 转载自:https://blogs.msdn.microsoft.com/sqlreleaseservices/sql-2014-service-pack ...