angularJS(6)

一: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(6)的更多相关文章

  1. angularJS(5)

    angularJS(5) 一,数据循环:特别要注意作用域 使用ng-repeat指令. <div ng-app="myApp" ng-controller="myC ...

  2. angularJS(4)

    angularJS(4) 一:angulaJs的作用域scope Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带.scope 是一个 JavaScr ...

  3. angularJS(3)

      angularJS(3) 一.angularJs的指令模型ng-model指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. 为应用程序数据提供类型验证(number.email ...

  4. angularJS(2)

    angularJS(2) 今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl&q ...

  5. AngularJS(1)

    AngularJS(1) 在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优 ...

  6. 学习笔记-AngularJs(十)

    前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...

  7. 学习笔记-AngularJs(九)

    到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...

  8. 学习笔记-AngularJs(七)

    在学习笔记-AngularJs(六)提及了事件处理器和过滤器以及它们的例子,而我们知道之前我是使用$http服务去获得我们需要的json数据,但是$http是比较底层的用法,有时候我们想把获取json ...

  9. 学习笔记-AngularJs(六)

    在学习笔记-AngularJs(五),通过引入bootstrap.css进行改写整个样式,这时学习项目也变得好看多了,现在我们又需要目录再进行一次改变,如下图: 这样就符合之前讲的对学习目录进行布置了 ...

随机推荐

  1. SSH实战 · 唯唯乐购项目(上)

    前台需求分析 一:用户模块 注册 前台JS校验 使用AJAX完成对用户名(邮箱)的异步校验 后台Struts2校验 验证码 发送激活邮件 将用户信息存入到数据库 激活 点击激活邮件中的链接完成激活 根 ...

  2. Js new到底发生了什么

    在Js中,我们使用了new关键字来进行实例化 那么在这个new的过程中到底发生了什么? 关于构造函数的return 正常来讲构造函数中是不用写return语句的,因为它会默认返回新创建的对象. 但是, ...

  3. Hyper-V3:虚拟机的配置

    在Hyper-V成功新建一台虚拟机,在正式使用之前,必须配置VM使用的硬件资源,并授予用户访问VM的权限等,本文罗列出一些常见的配置,供读者参阅. 一,为虚拟机分配使用的内存 在Hyper-V Man ...

  4. C#多线程之线程同步篇2

    在上一篇C#多线程之线程同步篇1中,我们主要学习了执行基本的原子操作.使用Mutex构造以及SemaphoreSlim构造,在这一篇中我们主要学习如何使用AutoResetEvent构造.Manual ...

  5. MySQL 系列(四)主从复制、备份恢复方案生产环境实战

    第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:MySQL 系列(二) 你不知道的数据库操作 第三篇:MySQL 系列(三)你不知道的 视图.触发器.存储过程.函数 ...

  6. C#~异步编程再续~await与async引起的w3wp.exe崩溃-问题友好的解决

    返回目录 关于死锁的原因 理解该死锁的原因在于理解await 处理contexts的方式,默认的,当一个未完成的Task 被await的时候,当前的上下文将在该Task完成的时候重新获得并继续执行剩余 ...

  7. Visual Studio:error MSB8020(搬运)

    状况如下: error MSB8020: The builds tools for v120 (Platform Toolset = 'v120') cannot be found. To build ...

  8. JavaScript事件代理和委托(Delegation)

    JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...

  9. Sass之坑Compass编译报错

    前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...

  10. Android Studio —— 创建Menu菜单项

    大多数android程序的右上角都会设置一个菜单按钮比如微信的界面右上角的加号. 这个需要在layout同级目录下新建文件夹命名为menu,再右击新建的menu新建xml文件: