AngularJS 最常用的功能
第一 迭代输出之ng-repeat标签
ng-repeat让table ul ol等标签和js里的数组完美结合
1 |
<ul> |
你甚至可以指定输出的顺序:
1 |
<li ng-repeat="person in persons | orderBy:'name'"> |
第二 动态绑定之ng-model标签
任何有用户输入,只要是有值的html标签,都可以动态绑定js中的变量,
而且是动态绑定。
1 |
<input type="text" ng-model='password'> |
对于绑定的变量,你可以使用{{}} 直接引用
1 |
<span>you input password is {{password}}</span> |
如果你熟悉fiter,你可以很容易的按你的需要格式输出
1 |
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span> |
第三 绑定点击事件之ng-click事件
使用ng-click你可以很容易的为一个标签绑定点击事件。
1 |
<button ng-click="pressMe()"/> |
当然前提是你要在$scope域中定义的自己的pressMe方法。
和传统的onclick方法不同,你甚至可以为ng-click方法传递一个对象,就像这样:
1 |
<ul> |
当然还有ng-dblclick标签
第四 分支语句之ng-switch on、ng-if/ng-show/ng-hide/ng-disabled标签
分支语句让你在界面上都可以写逻辑判断。
1 |
<ul> |
第五 校验语法之ng-trim ng-minlength ng-maxlength required ng-pattern 等标签
表单中的输入框,你可以使用上面的标签来实现对用户输入的校验。
从字面意思上你已经知道了它们的意思。
1 |
<form name="yourForm"> |
你可以通过 $scope.yourForm.inputText.$error.required 来判断输入框是否为空
你可以通过 $scope.yourForm.inputText.$invalid 来判断输入的内容是否满足ng-pattern,ng-maxlength,maxlength
你通过$scope.userNum获得的输入内容是去掉前后空白的,因为ng-trim的存在。
第六 下拉框之ng-options标签
ng-options是为下拉框专门打造的标签。
1 |
<select ng-model="yourSelected" ng-options="person.id as person.name in persons"></select> |
下拉框中显示的是person.name,当你选中其中一个的时候,你可以通过yourSelected得到你选中的person.id.
第七 控制css之ng-style标签
ng-style帮你轻松控制你的css属性
1 |
<span ng-style="myColor">your color</span> |
你可以通过给myColor赋值的形式来改变你想要的效果,就像这样:
1 |
$scope.myColor={color:'blue'}; |
第八 异步请求之$http对象。
AngularJS 提供了一个类似jquery的$.ajax的对象,用于异步请求。
在AngularJS中对异步操作是推崇至极的,所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。
1 |
$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"}) |
如果你是POST请求,params里的数据会帮你拼到url后面,data里的数据会放到请求体中。
AngularJS 最常用的功能的更多相关文章
- AngularJS 最常用的几种功能
AngularJS 最常用的几种功能 2017-04-13 吐槽阿福 互联网吐槽大会 第一 迭代输出之ng-repeat标签ng-repeat让table ul ol等标签和js里的数组完美结合 1 ...
- RealView编译器常用特有功能(转)
源:RealView编译器常用特有功能 一. 关键字和运算符 1. __align(n):指示编译器在n 字节边界上对齐变量. 对于局部变量,n 值可为 1.2.4 或 8. 对于全局变量,n 可以具 ...
- Impala系列: Impala常用的功能函数
--=======================查看内置的函数--=======================hive 不需要进入什么内置数据库, 即可使用 show functions 命令列出 ...
- iOS常用小功能
CHENYILONG Blog 常用小功能 技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http://weibo.com/luohanchenyilong ...
- Gson Json 序列号 最常用的功能 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- iOS 网易彩票-6设置模块三(常用小功能)
该篇文章中,用到很多iOS开发过程中常用的小功能,当前只是将这些功能集成到网易彩票的设置中.iOS-常用小功能介绍,请参考我的另一篇文章: iOS 常用小功能 总结:http://www.cnblog ...
- iOS 常用小功能 总结
常用小功能 iOS中的很多小功能都是非常简单的,几行代码就搞定了,比如打电话.打开网址.发邮件.发短信等 打电话 方法一(不被采用): 拨号之前会弹框询问用户是否拨号,拨完后能自动回到原应用 NSUR ...
- 12.21 Gson的常用用法 功能介绍 特点
使用谷歌GSON常用语法: 功能:映射Java Object与json格式的数据 1.通过Annotation注解来声明 2.支持自定义属性名称 3.支持包含或排除属性 4.支持自定义接口自己完成解析 ...
- 转载:给bash的提示符设置不同的颜色 一个很常用的功能,效果如下:
原文来自:http://www.cnblogs.com/cyttina/archive/2013/01/08/2850406.html 一个很常用的功能,效果如下: 这样就可以很轻易的将输入的指令和其 ...
随机推荐
- Codeforces Round #195 A B C 三题合集 (Div. 2)
A 题 Vasily the Bear and Triangle 题目大意 一个等腰直角三角形 ABC,角 ACB 是直角,AC=BC,点 C 在原点,让确定 A 和 B 的坐标,使得三角形包含一个矩 ...
- FAILURE: Build failed with an exception.
FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installD ...
- Query Object--查询对象模式(上)
回顾 上两篇文章主要讲解了我对于数据层的Unit Of Work(工作单元模式)的理解,其中包括了CUD的操作,那么今天就来谈谈R吧,文章包括以下几点: 什么是Query Object 基于SQL的实 ...
- easyui 键盘控制tree 上下
$.extend($.fn.tree.methods, { highlight: function(jq, target){ return jq.each(function(){ $(this).fi ...
- Java获取路径方法&相对路径读取xml文件方法
(1).request.getRealPath("/");//不推荐使用获取工程的根路径 (2).request.getRealPath(request.getRequestURI ...
- JS事件委托的原理和应用
js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...
- java--实现将文字生成二维码图片,并在中间附上logo,下方附上文字
前段时间因为工作需要,要实现将一段文字或者url生成二维码,然后中间附上logo,下方正中间附上文字的功能. 上网找了几篇教程学习了下,由于没有保存借鉴的博文链接,所以就没po上参考文章的链接啦,感谢 ...
- MySQL工具汇总
本博客已经迁移至:http://cenalulu.github.io/ 本篇博文已经迁移,阅读全文请点击:http://cenalulu.github.io/mysql/mysql-tools-lis ...
- iOS-定时器
一.定时器的作用 在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. 二.定时器的种类 大概有三种方法:NSTimer.CA ...
- Laravel 5 服务的注册和使用
首先我们需要创建一个服务的类,比如叫CqhServiceProvider,最简单的方式就是用artisan来帮我们创建 php artisan make:provider CqhServiceProv ...