AngularJS 最常用指令的功能
第一迭代输出之ng-repeat标签
ng-repeat让table ul ol等标签和js里的数组完美结合
- <ul>
- <li ng-repeat="person in persons">
- {{person.name}} is {{person.age}} years old.
- </li>
- </ul>
你甚至可以指定输出的顺序:
- <li
ng-repeat="person in persons | orderBy:'name'">
第二动态绑定之ng-model标签
任何有用户输入,只要是有值的html标签,都可以动态绑定js中的变量,
而且是动态绑定。
- <input
type="text" ng-model='password'>
对于绑定的变量,你可以使用{{}} 直接引用
- <span>you
input password is {{password}}</span>
如果你熟悉fiter,你可以很容易的按你的需要格式输出
- <span>{{1288323623006
| date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
第三绑定点击事件之ng-click事件
使用ng-click你可以很容易的为一个标签绑定点击事件。
- <button
ng-click="pressMe()"/>
当然前提是你要在$scope域中定义的自己的pressMe方法。
和传统的onclick方法不同,你甚至可以为ng-click方法传递一个对象,就像这样:
- <ul>
- <li ng-repeat="person in persons">
- <button ng-click="printf(person)"/>
- </li>
- </ul>
当然还有ng-dblclick标签
第四分支语句之ng-switch on、ng-if/ng-show/ng-hide/ng-disabled标签
分支语句让你在界面上都可以写逻辑判断。
- <ul>
- <li ng-repeat="person in persons">
- <!-- ng-switch 多个选项时的应用 -->
- <span ng-switch on="person.sex">
- <span
ng-switch-when="1">you are a boy</span> - <span
ng-switch-when="2">you are a girl</span> - </span>
- <!-- ng-if 判断条件成立时显示,包含本身 span 标签,如果不成立则连本身都不显示 -->
- <span ng-if="person.sex==1">you may be
a father</span> - 10.
<!-- ng-show 判断条件成立时显示,不包含本身 span 标签 --> - 11.
<span ng-show="person.sex==2">you may
be a mother</span> - 12.
<span> - 13.
please input your baby's
name:<input type="text" ng-disabled="!person.hasBaby"/> - 14.
</span> - 15.
</li>
16.
</ul>
第五校验语法之 ng-trim ng-minlength ng-maxlength required ng-pattern 等标签
这块在实践练习,发现之前记录太简单,而这部分涉及到的内容比较丰富,所以要另起一篇日记来记录,请点《AngularJS 自带表单验证的使用》来查看
第六下拉框之 ng-options 标签
ng-options是为下拉框专门打造的标签。
- <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属性
- <span
ng-style="myColor">your color</span>
你可以通过给myColor赋值的形式来改变你想要的效果,就像这样:
$scope.myColor={color:’blue’};
$scope.myColor={cursor: ‘pointer’,color:’blue’};
第八异步请求之 $http 对象。
AngularJS 提供了一个类似jQuery的$.ajax的对象,用于异步请求。
在AngularJS中对异步操作是推崇至极的,所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。
- $http({method
: 'POST',params : { id:123}, data:{name:'john',age:27}, url :
"/mypath"}) - .success(function(response,
status, headers, config){ - //do anything what you want;
- })
- .error(function(response,
status, headers, config){ - //do anything what you want;
- });
如果你是POST请求,params里的数据会帮你拼到url后面,data里的数据会放到请求体中。
AngularJS 最常用指令的功能的更多相关文章
- AngularJS创建新指令 - 基本功能
指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init ...
- AngularJS创建新指令 - 函数功能
首先先介绍下AngularJS指令下的几种函数 Link函数和Scope 指令生成出的模板其实没有太多意义,除非它在特定的scope下编译.默认情况下,指令并不会创建新的子scope.更多的,它使用父 ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- [AngularJS] 常用指令
常用指令 ng-hide指令,用于控制部分HTML元素可见(ng-hide="false")和不可见状态(ng-hide="true"),如下: <div ...
- AngularJS 最常用的几种功能
AngularJS 最常用的几种功能 2017-04-13 吐槽阿福 互联网吐槽大会 第一 迭代输出之ng-repeat标签ng-repeat让table ul ol等标签和js里的数组完美结合 1 ...
- redis常用指令总结以及功能介绍
第一部分 redis的常用指令 一.针对key的操作 1.1 del key [key .. ] , 删除指定的一个或者多个key;1.2 dump key ...
- 你知道用AngularJs怎么定义指令吗?
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...
- Angular JS从入门基础 mvc三层架构 常用指令
Angular JS从入门基础 mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...
随机推荐
- FlowPortal-BPM——创建新模块
一.设置webconfig (1)数据源设置 添加所有所用到数据库 (2)修改企业信息 二.Main.ashx——添加新的功能选项卡 new { id = "EXECUTE", t ...
- SpringBoot 整合 中国移动 MAS HTTP1.0 实现短信发送服务
因为客户需要,本身使用的 阿里云的短信服务改为了中国移动MAS HTTP 1.0 短信通知,因为看到网络上关于此类的博客知识很少,再趟完坑后特地写下这篇博客,提醒后来人. 特别感谢 中国移动MAS ...
- asp.net 网站在Apache下的配置,就这么简单
asp.net 网站在Apache下的配置,就这么简单 # # Virtual Hosts # # If you want to maintain multiple domains/hostnames ...
- Linux网络编程服务器模型选择之并发服务器(上)
与循环服务器的串行处理不同,并发服务器对服务请求并发处理.循环服务器只能够一个一个的处理客户端的请求,显然效率很低.并发服务器通过建立多个子进程来实现对请求的并发处理.并发服务器的一个难点是如何确定子 ...
- Redis-集群 - 分片
Redis是一个基于内存的数据库,其不仅读写速度快,每秒可以执行大约110000的写操作,81000的读取操作,而且其支持存储字符串,哈希结构,链表,集合丰富的数据类型.所以得到很多开发者的青睐.加之 ...
- ES6-Async & 异步
依赖文件地址 :https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js <!DOCTYPE html> <html&g ...
- rspec中的let和let!区别
文档 https://relishapp.com/rspec/rspec-core/v/2-5/docs/helper-methods/let-and-let 从上面文档中得出 let 1 只会在一个 ...
- css定位问题的记录
postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom.兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留.而 ...
- html中设置textbox的宽和高
1.宽:width是不行的,而应该用size size=30,表示能输入30个字符 2.高: style="height:50px"
- GitHub和git和repo的使用
1. GitHub的使用 https://github.com/maogefff/GitHub-git-repo 2. git的使用 https://github.com/maogefff/GitHu ...