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 ...
随机推荐
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- ASP.NET Core的路由[4]:来认识一下实现路由的RouterMiddleware中间件
虽然ASP.NET Core应用的路由是通过RouterMiddleware这个中间件来完成的,但是具体的路由解析功能都落在指定的Router对象上,不过我们依然有必要以代码实现的角度来介绍一下这个中 ...
- 带你实现开发者头条APP(三) 首页实现
title: 带你实现开发者头条APP(三) 首页实现 tags: 轮播广告,ViewPager切换,圆形图片 grammar_cjkRuby: true --- 一.前言 今天实现开发者头条APP的 ...
- 深入理解 Java G1 垃圾收集器--转
原文地址:http://blog.jobbole.com/109170/?utm_source=hao.jobbole.com&utm_medium=relatedArticle 本文首先简单 ...
- AFNetworking 3.0 源码解读(十)之 UIActivityIndicatorView/UIRefreshControl/UIImageView + AFNetworking
我们应该看到过很多类似这样的例子:某个控件拥有加载网络图片的能力.但这究竟是怎么做到的呢?看完这篇文章就明白了. 前言 这篇我们会介绍 AFNetworking 中的3个UIKit中的分类.UIAct ...
- css text-fill-color与text-stroke讲解
顾名思义"text-fill-color"就是文字填充颜色而"text-stroke"就是文字描边.还别说,两个属性可以制作出各种炫酷的文字效果,不过IE系列都 ...
- 修改session垃圾回收几率
<?php //修改session垃圾回收几率 ini_set('session.gc_probability','1'); ini_set('session.gc_divisor','2'); ...
- 面向对象相关知识点xmind
- RMS:不能对生产服务器使用测试清单
问题说明:在使用office软件RMS加密时报:不能对生产服务器使用测试清单,或者使用 rmsbulk.exe进行RMS加密时,报不能连接到RMS服务器. 解决办法: 请到https://suppor ...
- Win7安装MySQL-5.7.16过程
1.在C盘新建MYSQL文件夹:2.将mysql-5.7.16-winx64拷贝到C:\MYSQL文件夹下,更名为mysql-5.7.16:3.在mysql-5.7.16目录下,建my.ini文件,内 ...