AngularJS中的一些常用指令介绍

 　　这篇文章主要介绍了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat这四个指令的讲解,需要的朋友可以参考下

　　AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令：

　　ng-app - 该指令启动一个AngularJS应用。

　　ng-init - 该指令初始化应用程序数据。

　　ng-model - 此指令定义的模型，该模型是变量在AngularJS使用。

　　ng-repeat - 该指令将重复集合中的每个项目的HTML元素。

　　ng-app指令

　　ng-app 指令启动一个AngularJS应用。它定义根元素。它会自动初始化或启动加载包含AngularJS应用程序的Web页面的应用程序。它也被用来加载各种AngularJS模块AngularJS应用。在下面的例子中，我们定义默认AngularJS应用使用div元素的ng-app 属性。

　　?

1
2
3

<div ng-app="">
...
</div>

　　ng-init 指令

　　ng-init 指令初始化一个AngularJS应用程序的数据。它被用来把值在应用程序中使用的变量。在下面的例子中，我们将初始化countries数组。使用JSON语法来定义countries数组。

　　?

1
2
3
4
5
6

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
 
...
</div>

　　ng-model指令

　　ng-model指令定义在AngularJS应用中使用的模型/变量。在下面的例子中，我们定义了一个名为“name”的模型。

　　?

1
2
3
4

<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
</div>

　　ng-repeat 指令

　　ng-repeat 指令重复html元素集合中的每个项目。在下面的例子中，我们已经迭代了数组countries。

　　?

1
2
3
4
5
6
7
8
9

<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>

　　例子

　　下面的例子将展示上述所有指令。

　　testAngularJS.html

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
<title>AngularJS Directives</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

　　输出

　　在Web浏览器打开textAngularJS.html。输入姓名并看到以下结果。

时间： 2024-11-05 06:12:20

AngularJS中的一些常用指令介绍的相关文章

C#中的预编译指令介绍

原文:C#中的预编译指令介绍 1.#define和#undef      用法:           #define DEBUG           #undef DEBUG     #define告诉编译器,我定义了一个DEBUG的一个符号,他类似一个变量,但是它没有具体的值,可以将它看为一个符号而已.#undef就是删除这个符号的定义.如果符号DEBUG没定义过,则#undef不起作用,否则#define不起作用.二者都必须放在源代码之前.二者的顺序看代码的顺序:     #define D

AngularJS中$http服务常用的应用及参数_AngularJS

前言 $http 服务:只是简单封装了浏览器原生的XMLHttpRequest对象,接收一个参数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容,这个函数返回一个promise对象,具有success和error方法. $http服务的使用场景: var promise = $http({ method:"post", // 可以是get,post,put, delete,head,jsonp;常使用的是get,post url:"./data.json"

浅析HTTP消息头网页缓存控制以及header常用指令介绍

本篇文章是对HTTP消息头网页缓存控制以及header常用指令进行了详细的分析介绍,需要的朋友参考下   网页的缓存是由HTTP消息头中的"Cache-control"来控制的,常见的取值有private.no-cache.max-age.must-revalidate等,默认为private.其作用根据不同的重新浏览方式分为以下几种情况:(1) 打开新窗口值为private.no-cache.must-revalidate,那么打开新窗口访问时都会重新访问服务器. 而如果指定了max

浅析HTTP消息头网页缓存控制以及header常用指令介绍_php技巧

网页的缓存是由HTTP消息头中的"Cache-control"来控制的,常见的取值有private.no-cache.max-age.must-revalidate等,默认为private.其作用根据不同的重新浏览方式分为以下几种情况:(1) 打开新窗口值为private.no-cache.must-revalidate,那么打开新窗口访问时都会重新访问服务器.而如果指定了max-age值,那么在此值内的时间里就不会重新访问服务器,例如:Cache-control: max-age=5

oracle中110个常用函数介绍_oracle

1. ASCII 返回与指定的字符对应的十进制数; SQL> select ascii(A) A,ascii(a) a,ascii(0) zero,ascii( ) space from dual; A A ZERO SPACE --------- --------- --------- --------- 65 97 48 32 2. CHR 给出整数,返回对应的字符; SQL> select chr(54740) zhao,chr(65) chr65 from dual; ZH C --

markdown的常用指令介绍

标题 标题能显示出文章的结构:行首插入1-6个 # ,每增加一个 # 表示更深入层次的内容,对应到标题的深度由 1-6 阶. Header 1 : H1 - # Header 1 Header 2 :H2 - ## Header 2 Header 3 :H3 - ### Header 3 Header 4 :H4 - #### Header 4 Header 5 :H5 - ##### Header 5 Header 6 :H6 - ###### Header 6 列表 * Red + Gree

Angularjs中使用Filters详解_AngularJS

Filter作用就是接收一个输入,通过某个规则进行处理,然后给用户返回处理后的结果.Filter可以用在模板.控制器.或者服务,同时也会很容易自定义一个Filter过滤器. 在模板中使用Filter Filter可以用于在视图模板中使用一下语法表达式: {{ expression | filter }} 例如:格式{{ 12 | currency }}是使用currency的filter用法,让数字12过滤为货币形式,结果是$12.00. Filter可以应用到另一个过滤的结果中.这就是所谓的"

AngularJS中的自定义指令的使用介绍

  这篇文章主要介绍了深入讲解AngularJS中的自定义指令的使用,AngularJS是一款热门的JavaScript开发库,需要的朋友可以参考下 AngularJS的自定义指令,就是你自己的指令,加上编译器编译DOM时运行的原生核心函数.这可能很难理解.现在,假设我们想在应用中不同页面复用一些特定的代码,而又不复制代码.那么,我们就可以简单地把这段代码放到单独的文件,并调用使用自定义指令的代码,而不是一遍又一遍地敲下来.这样的代码更容易理解.AngularJS中有四种类型的自定义指令: 元素

3个可以改善用户体验的AngularJS指令介绍

  这篇文章主要介绍了3个可以改善用户体验的AngularJS指令,AngularJS是一款具有很高人气的JavaScript框架,需要的朋友可以参考下 1.头像图片 为了在你的应用中展示头像图片,你需要使用用户的电子邮件地址,将地址转换为小写并使用md5加密该字符串.所以聪明的做法是使用指令来做到这些,并且可以复用. ? 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   /* * A