AngularJS之基本指令(init、repeat)
<h3>ng-init初始化变量</h3>
<div ng-init="name='aurora';age='18'">
<p ng-bind="name+','+age"></p>
<p>{{name+','+age}}</p>
<p ng-bind="name"></p>
<p ng-bind="age"></p>
</div>
<h3>ng-init初始化对象</h3>
<div ng-init="hero={name:'aurora',role:'sup',line:'不管刮风还是下雨,太阳照常升起'}">
<p ng-bind="hero.name+','+hero.role+','+hero.line"></p>
<p ng-bind="hero.name"></p>
<p ng-bind="hero.role"></p>
<p ng-bind="hero.line"></p>
</div>
<h3>ng-init初始化数组</h3>
<div ng-init="heros=['曙光女神','堕落天使','魂锁典狱长']">
<p ng-bind="heros[0]+','+heros[1]+','+heros[2]"></p>
<p ng-bind="heros[0]"></p>
<p ng-bind="heros[1]"></p>
<p ng-bind="heros[2]"></p>
</div> <h3>ng-controller控制器</h3>
<div ng-controller="contr-2">
First Name: <input type="text" ng-model="firstName">
Last Name: <input type="text" ng-model="lastName">
Full Name : <span>{{firstName + "," + lastName}}</span>
Full Name : <span ng-bind="firstName + ',' + lastName"></span>
</div> <h3>ng-repeat遍历无重复集合</h3>
<div ng-init="names=[1,2,3]">
<ul>
<li ng-repeat="x in names">
{{x}}
</li>
</ul>
</div>
<h3>ng-repeat遍历重复集合</h3>
<div ng-init="number=[1,2,2,3]">
<ul>
<li ng-repeat="x in number track by $index">
{{x}}
</li>
</ul>
</div>
<h3>ng-repeat遍历对象</h3>
<div ng-controller="contr-3">
<ul>
<li ng-repeat="(key,value) in object track by $index">
{{key+":"+value}}
</li>
</ul>
</div>
<h3>ng-repeat遍历对象(按原有顺序)</h3>
<div ng-controller="contr-4">
<ul ng-repeat="obj in objs ">
<li ng-repeat="(key,value) in obj ">
{{key+":"+value}}
</li>
</ul>
</div>
<h3>ng-repeat遍历对象(属性详解)</h3>
<table ng-controller="contr-5">
<tr ng-repeat="(key, value) in objs ">
<td>学号:
<span ng-bind="$index"></span>
</td>
<td>
<span ng-bind="key"></span>:
<span ng-bind="value"></span>
</td>
<td>是否为奇数?
<span ng-bind="$odd"></span>
</td>
<td>是否为偶数?
<span ng-bind="$even"></span>
</td>
<td>排行是老大?
<span ng-bind="$first"></span>
</td>
<td>排行最小?
<span ng-bind="$last"></span>
</td>
<td>排行中间?
<span ng-bind="$middle"></span>
</td>
</tr>
</table>
<h3>ng-repeat start/end</h3>
<div ng-controller="contr-6">
<div ng-repeat-start="(key,value) in objs">
<p>学号:
<span ng-bind="$index"></span>
</p>
<p>
<span ng-bind="key"></span>:
<span ng-bind="value"></span>
</p>
</div>
<div ng-repeat-end></div>
</div>
效果:http://runjs.cn/detail/l16ogqjb
AngularJS之基本指令(init、repeat)的更多相关文章
- AngularJS中的指令全面解析(转载)
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 使用Angularjs的ng-cloak指令避免页面乱码
在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- AngularJS中Directive指令系列 - scope属性的使用
文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...
- 你知道用AngularJs怎么定义指令吗?
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...
- Ⅵ.AngularJS的点点滴滴-- 指令
指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...
- angularJS之使用指令封装DOM操作
angularJS之使用指令封装DOM操作 创建指令 指令也是一种服务,只是这种服务的定义有几个特殊要求: 必须使用模块的directive()方法注册服务 必须以对象工厂/factory()方法定义 ...
- AngularJS创建新指令 - 基本功能
指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init ...
- 关于angularjs的ng-repeat指令
(如果有说的不对,欢迎指教,更欢迎大家一起交流.) 关于angularjs的ng-repeat指令,想必每个学习angularjs的初学者都很有映像.那我也总结一下我使用ng-repeat的时候经验, ...
随机推荐
- 提高IIS的FTP安全性 管理员的九阴真经
提高IIS的FTP安全性 管理员的九阴真经 <九阴真经>是很多武林高手蒙昧以求的武林秘籍,在系统管理员这个武林中也有很多类似<九阴真经>一样的秘籍.在这里就向大家介绍一下有关提 ...
- JS 原型模式创建对象
例子: class Test { constructor(val) { this.val = val } walk() { console.log(this) console.log('walk') ...
- HTML基础第七讲---框架
转自:https://i.cnblogs.com/posts?categoryid=1121494 框架(Frame)也就是所谓的分割窗口.分割画面.框窗效果(还真是五花八门),这个技巧在运用上问题比 ...
- 00089_字节输出流OutputStream
1.字节输出流OutputStream (1)OutputStream此抽象类,是表示输出字节流的所有类的超类.操作的数据都是字节,定义了输出字节流的基本共性功能方法: (2)输出流中定义都是写wri ...
- elementUI upload 对图片的宽高做校验
很开心今天中午没有吃饭!原因是一直没有解决掉一个小问题,于是一直试错,最后看了下源码才有了点头绪,历时四五个小时才解决掉,有点怀疑自己的能力了,所以写下此文,记录一下今天的囧况!一般情况下遇到问题,自 ...
- eclipse 使用jetty调试时,加依赖工程的源码调试方法
[1] 添加source eclipse-->debug as-->debug configurations-->source [2]若source不起作用 重新编译一下,mvn c ...
- Android 监听软键盘点击回车及换行事件
mEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() { @Override public boolean ...
- node event中 on emit off 的封装
事件绑定一个事件名称对应多个事件函数 应此它们的关系是一对多的关系 数据类型采用对象的形式 key:val 因为函数有多个 所以val选用数组 事件仓库 eventList = { key:val, ...
- Altium Designer如何创建类,如何修改线宽
如果线宽还是没有改变,就是因为,有一个默认的class,它的规则优先级要高于PWR
- LM4990音频功放芯片
我们选用的一种封装:我们用的是DGK封装. 典型电路图: 下面是示意图:四中封装的示意图是不一样的: 下面是真正的原理图: 高放大倍数的原理图: 查分式的: 单个输入的原理图: 下面是有关电源的选择: