AngularJS学习笔记之基本指令

   AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。ng-app 指令初始化一个 AngularJS 应用程序。ng-init 指令初始化应用程序数据。ng-model 指令把应用程序数据绑定到 HTML 元素。

  AngularJS学习笔记之基本指令(init、repeat)

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

<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>

以上所述上就是本文的全部内容了,希望大家能够喜欢。

时间: 2016-06-17

AngularJS学习笔记之基本指令的相关文章

AngularJS学习笔记之ng-options指令

       ng-options是angular-1.3新出的一个指令,这篇文章就来介绍这个指令的用法.有需要的小伙伴可以参考下.            1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <div ng-controller="ngs

angularJS学习笔记:创建自定义angularJS指令基础篇

AngularJS提供了很多指令可以帮助我们操作DOM.处理事件.数据绑定.绑定控制器与作用域(ngView)等等.例如ngClick.ngShow.ngHide.ngRepeat以及其它很多AngularJS核心的指令都可以帮助我们很轻松的使用这个框架. 虽然内置的指令已经覆盖了大部分的使用场景,但在实际使用中为了简化操作或组件重用等我们经常需要创建自己的指令.在这个系列的文章中我将一步步带你了解AngularJS指令是如何工作的,以及如何开始使用/创建它们. 在这个系列的文章中我们假定你已经

AngularJS学习笔记之依赖注入详解_AngularJS

     最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不错.但是,当我看到左上角的总页码的时候,479页....479....479....俺的小心脏被击穿了二分之一有木有啊,上半身都石化了有木有啊,那种特别想学但是看到页码又不想学的纠结的心情比和女朋友吵架了还复杂有木有啊,我平常看的电子书百位数都不大于3的好伐! 哎,原谅我吧,我应该多看几本

AngularJS学习笔记

1. 关于AngularJS AngularJS 是 Google 开源出来的一套 js 工具.下面简称其为 ng .这里只说它是"工具",没说它是完整的"框架",是因为它并不是定位于去完成一套框架要做的事.更重要的,是它给我们揭示了一种新的应用组织与开发方式. ng 最让我称奇的,是它的数据双向绑定.其实想想,我们一直在提数据与表现的分离,但是这里的"双向绑定"从某方面来说,是把数据与表现完全绑定在一起--数据变化,表现也变化.反之,表现变化了

AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析

路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute. 不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!! 于是,一个基于ngRoute开发的第三方路由模块,叫做ui.router,受到了大家的"追捧". ngRoute vs ui.router 首先,无论是使用哪种路由,作为框架额外的附加功能,它们都将以模块依赖的形式被引入,

AngularJS学习笔记(三)数据双向绑定的简单实例_AngularJS

双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 数据-->视图 这里我们只演示有了数据以后,如何绑定到视图上. <!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandb

Vue.js第一天学习笔记(数据的双向绑定、常用指令)_javascript技巧

数据的双向绑定(ES6写法)  效果: 没有改变 input 框里面的值时: 将input 框里面的值清空时: 重新给  input 框输入  豆豆 后页面中  span  里绑定{{testData.name}}的值随着 input 框值的变化而变化. 在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定.并且v-model指令只能用于:<input>.<select>.<textarea>这三种标签. <template> <di

PHP输入输出流学习笔记

  这篇文章主要介绍了PHP输入输出流学习笔记,PHP输入和输出流是通过php://来访问的,它允许访问 PHP 的输入输出流.标准输入输出和错误描述符,内存中.磁盘备份的临时文件流以及可以操作其他读取写入文件资源的过滤器,需要的朋友可以参考下 PHP输入和输出流是通过php://来访问的,它允许访问 PHP 的输入输出流.标准输入输出和错误描述符, 内存中.磁盘备份的临时文件流以及可以操作其他读取写入文件资源的过滤器. php://stdin, php://stdout 和 php://std

Windows Shellcode学习笔记——shellcode在栈溢出中的利用与优化

本文讲的是Windows Shellcode学习笔记--shellcode在栈溢出中的利用与优化, 0x00 前言 在<Windows Shellcode学习笔记--shellcode的提取与测试>中介绍了如何对shellcode作初步优化,动态获取Windows API地址并调用,并通过程序实现自动提取机器码作为shellcode并保存到文件中. 0x01 简介 先从最入门的缓冲区溢出开始 本文将要结合<0day安全:软件漏洞分析技术>中的"栈溢出原理与实践"