AngularJs之五
一: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之五的更多相关文章
- 如何用angularjs制作一个完整的表格之五__完整的案例
由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- AngularJs之九(ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
- AngularJS过滤器filter-保留小数,小数点-$filter
AngularJS 保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- 步入angularjs directive(指令)--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- 玩转spring boot——结合AngularJs和JDBC
参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...
- 玩转spring boot——结合jQuery和AngularJs
在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...
随机推荐
- Angular2入门系列教程2-项目初体验-编写自己的第一个组件
上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...
- .NET Core 首例 Office 开源跨平台组件(NPOI Core)
前言 最近项目中,需要使用到 Excel 导出,找了一圈发现没有适用于 .NET Core的,不依赖Office和操作系统限制的 Office 组件,于是萌生了把 NPOI 适配并移植到 .NET C ...
- document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)
document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中 ...
- 认识 Azure
本文为官网摘录总结
- 旺财速啃H5框架之Bootstrap(二)
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...
- 从零开始编写自己的C#框架(28)——建模、架构与框架
文章写到这里,我一直在犹豫是继续写针对中小型框架的设计还是写些框架设计上的进阶方面的内容?对于中小型系统来说,只要将前面的内容进行一下细化,写上二三十章具体开发上的细节,来说明这个通用框架怎么开发的就 ...
- 计算机程序的思维逻辑 (60) - 随机读写文件及其应用 - 实现一个简单的KV数据库
57节介绍了字节流, 58节介绍了字符流,它们都是以流的方式读写文件,流的方式有几个限制: 要么读,要么写,不能同时读和写 不能随机读写,只能从头读到尾,且不能重复读,虽然通过缓冲可以实现部分重读,但 ...
- H5坦克大战之【玩家控制坦克移动2】
周一没有看圣诞大战,这几天比较忙也没有看赛后的报道,今天就先不扯NBA,随便扯扯自己.昨天在电脑里找东西的时候翻到以前兼职健身教练时的照片,思绪一下子回到学生时代,脑子久久换不过来.现在深深觉得健身和 ...
- C++随笔:.NET CoreCLR之corleCLR核心探索之coreconsole(2)
这篇文章是上篇的续集,本文将会继续介绍coreconsole.cpp里面的逻辑.也许大家会看一些CLR的书,我承认我没有看过,因为我觉得一个人,他再NB,那也是他自己的眼光,而且说句难听的,CLR也不 ...
- 基于SignalR的消息推送与二维码描登录实现
1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于Singl ...