Angularjs中的视图和指令介绍
这篇文章主要介绍“Angularjs中的视图和指令介绍”,在日常操作中,相信很多人在Angularjs中的视图和指令介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Angularjs中的视图和指令介绍”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
网站建设哪家好,找成都创新互联!专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了桦川免费建站欢迎大家使用!
AngularJS 视图和指令介绍
在开始之前,让我首先设置一个简单的 AngularJS 应用程序,您可以使用它来体验本文中的示例:
AngularJS 指令
AngularJS 视图将模型中的数据混合到 HTML 模板中。您可以使用 AngularJS指令 来告诉 AngularJS 如何将数据混合到 HTML 模板中。本文将涵盖最常用的 AngularJS 指令。
插值指令
插值指令是 AngujarJS 中最基本的指令之一。插值指令将表达式的结果插入到 HTML 模板中。您可以使用{{ }}
符号标记插入表达式的位置。下面是一个例子:
{{myData.text}}
HTML 模板包含在div
具有ng-controller
属性的元素中。HTML 模板内部是一个span
元素,内部是一个插值指令。该指令指示 AngularJSmyData.text
在给定位置插入数据值。
插值指令还可以插入从模型对象的函数返回的数据。下面是一个例子:
{{myData.textf()}}
在此示例中,插值指令{{myData.textf()}}
将调用模型对象myData.textf()
上的函数$scope
,并将从该函数返回的文本插入到 HTML 模板中。
该textf()
函数被插入到$scope.myData
控制器函数内的对象中,如您在示例中所见。
ng-bind 指令
该ng-bind
指令是插值指令的替代。您可以通过ng-bind
在您希望 AngularJS 插入数据的 HTML 元素中插入一个属性来使用它。下面是一个例子:
这会将myData.text()
函数返回的数据插入到span
元素的主体中。请注意属性{{ }}
内的表达式周围的 不是必需的ng-bind
。
从模型中转义 HTML
如果从模型获得的数据包含 HTML 元素,则这些元素在插入 HTML 模板之前会被转义。转义意味着 HTML 显示为文本,而不是 HTML。
这样做是为了防止 HTML 注入攻击。例如,在聊天应用程序中,有人可能会在聊天消息中插入带有 JavaScript的元素。如果此元素未转义,则任何看到聊天消息的人都可能会
执行该 元素。随着 HTML 转义,
元素将仅显示为文本。
您可以使用ng-bind-html-unsafe
指令禁用 HTML 转义,如下所示:
在禁用 HTML 转义时,您应该非常小心。确保没有显示不受信任的 HTML。
条件渲染
AngularJS 可以根据模型中数据的状态显示或隐藏 HTML。您可以使用一组专门为此目的创建的 AngularJS 指令。我将在以下部分中介绍这些指令。
ng-show + ng-hide 指令
的ng-show
和ng-hide
指令用于显示或隐藏根据模型中的数据的HTML元素。这两个指令做同样的事情,但彼此相反。这里有两个例子:
此示例创建两个span
元素。一个有一个ng-show
指令,另一个有一个ng-hide
指令。这两个指令都查看myData.showIt
布尔变量以确定它们是否应该显示或隐藏span
元素。该ng-show
指令将显示元素如果模型值为true,并隐藏元素如果模型值为false。该ng-hide
指令将执行相反的操作:span
如果模型值为 true,则隐藏元素,如果模型值为 false,则显示它。
注意控制器函数如何将 设置myData.showIt
为true
。这意味着上面的示例将显示第一个 span 元素并隐藏第二个。
HTML 元素(span
在本例中为元素)使用 CSS 属性隐藏display: none;
。这意味着 HTML 元素仍然存在于 DOM 中。它们只是不可见。
ng-switch 指令
ng-switch
如果您想根据模型中的数据从 DOM 中添加或删除 HTML 元素,则使用 该指令。下面是一个例子:
Shown when switch is 1Shown when switch is 2Shown when switch is anything else than 1 and 2
此示例包含一个div
具有ng-switch
属性和on
属性的元素。该on
属性指示要打开模型中的哪些数据。
div
元素 内部是三个嵌套div
元素。前两个嵌套div
元素包含一个ng-switch-when
属性。该属性的值告诉on
父属性中引用的模型数据div
应该具有什么值,以便嵌套div
可见。在此示例中,第一个嵌套div
在myData.switch
为 1时可见,第二个嵌套div
在myData.switch
为 2时可见。
该third
嵌套div
有一个ng-switch-default
属性。如果没有其他ng-switch-when
指令匹配,则显示div
withng-switch-default
属性。
在上面的示例中,控制器函数设置myData.switch
为 3。这意味着将显示嵌套div
的ng-switch-default
属性。另外两个嵌套div
元素将从 DOM 中完全删除。
ng-if 指令
该ng-if
指令可以包括/从DOM删除HTML元素,就像ng-switch
指令,但它有一个简单的语法。下面是一个例子:
ng-if Show it
ng-if
和ng-show
+ 之间的主要区别ng-hide
是 ng-if
从 DOM 中完全删除 HTML 元素,而ng-show
+ ng-hide
只是将 CSS 属性display: none;
应用于元素。
ng-include 指令
该ng-include
指令可用于将来自其他文件的 HTML 片段包含到视图的 HTML 模板中。下面是一个例子:
T此示例将文件包含angular-included-fragment.html
到div
具有ng-include
属性的 HTML 模板内。注意文件名是如何引用的(单引号)。
您可以根据条件包含 HTML 片段。例如,您可以在两个文件之间进行选择,如下所示:
此示例将包括fragment-1.html
ifmyData.showIt
为 true 和fragment-2.html
ifmyData.showIt
为 false。
ng-repeat 指令
该ng-repeat
指令用于迭代一组项目并从中生成 HTML。在初始生成之后,ng-repeat
监视用于生成 HTML 的项目的更改。如果项目发生变化,该ng-repeat
指令可能会相应地更新 HTML。这包括重新排序和删除 DOM 节点。
这是一个简单的ng-repeat
例子:
- {{theItem.text}}
此示例将为数组中的li
每个项目创建一个元素myData.items
。
您还可以迭代从函数调用返回的集合。下面是一个例子:
- {{theItem.text}}
您可以使用稍微不同的语法迭代 JavaScript 对象的属性:
- {{name}} = {{value}}
注意指令的(name, value)
部分ng-repeat
。这会通知 AngularJS 迭代对象的属性。该name
参数将被绑定到的属性名称和value
参数将被绑定到的属性值。该name
和value
参数可以输出到HTML模板,就像任何其他JavaScript变量或对象的属性,你可以从上面的HTML模板见。
特殊的 ng-repeat 变量
该ng-repeat
指令定义了一组特殊变量,您可以在迭代集合时使用这些变量。这些变量是:
$index
$first
$中
$last
该$index
变量包含被迭代元素的索引。
的$first
,$middle
并且$last
包含根据当前的项目是否正在迭代集合中的第一,中间或最后一个元素的布尔值。如果一个项目既不是第一个也不是最后一个,它就是“中间”。您可以使用这些变量使用例如生成不同的HTML ng-show
/ ng-hide
,ng-switch
, ng-if
和ng-include
指令如前所述。
重复多个元素
到目前为止,您只看到了如何使用ng-repeat
. 如果您想重复多个 HTML 元素,您必须将这些元素嵌套在容器元素中,并让容器元素具有该ng-repeat
元素,如下所示:
{{name}}{{value}}但是,将要重复的元素包装在根元素中可能并不总是可行的。因此 AngularJS 有
ng-repeat-start
和ng-repeat-end
指令,用于标记开始和结束重复的元素。下面是一个例子:
- {{name}}
- {{value}}
此示例将为 中的
li
每个属性重复这两个元素myData.myObject
。过滤
上面介绍的一些指令支持过滤。本节将解释过滤的工作原理。
该
ng-repeat
指令可以接受这样的过滤器:注意
| filter: itemFilter
上面声明的部分。那部分是过滤器定义。该| filter:
部分告诉 AngularJS 将过滤器应用于myData.items
数组。该itemFilter
是过滤函数的名称。此函数必须存在于$scope
对象上,并且必须返回 true 或 false。如果过滤器函数返回 true,则ng-repeat
指令使用数组中的元素。如果过滤器函数返回 false,则忽略该元素。下面是一个例子:格式化过滤器
AngularJS 带有一组内置格式过滤器,可以与插值指令和
ng-bind
. 以下是格式过滤器的列表:
过滤器 说明 date
根据给定的日期格式将变量格式化为日期 currency
将变量格式化为带有货币符号的数字 number
将变量格式化为数字 lowercase
将变量转换为小写 uppercase
将变量转换为大写 json
将变量转换为 JSON 字符串 这是一个日期过滤器示例:
{{myData.theDate | date: 'dd-MM-yyyy'}}
此示例显示了
date
可以根据| date:
部分后给出的日期格式模式格式化 JavaScript 日期对象的过滤器。它是myData.theDate
将被格式化为日期的属性。因此,它必须是一个 JavaScript 日期对象。这是一个数字过滤器示例:
{{myData.theNumber | number: 2}}
此示例将
myData.theNumber
变量格式化为带有 2 个小数位的数字。下面是一个小写和大写过滤器示例:
{{myData.mixedCaseText | lowercase}} {{myData.mixedCaseText | uppercase}}数组过滤器
AngularJS 还包含一组过滤或转换数组的数组过滤器。这些过滤器是:
数组过滤器:
过滤器 说明 limitTo
将数组限制为给定的大小,从数组中的某个索引开始。该 limitTo
过滤器也适用于字符串。filter
通用过滤器。 orderBy
根据提供的条件对数组进行排序。 下面是一个
limitTo
例子:{{myData.theText | limitTo: 3}}
这将
$scope
myData.theText
变量限制为 3 个字符的长度。如果将此过滤器应用于数组,则该数组将被限制为 3 个元素。该
filter
过滤器是一种特殊的过滤器,可以做很多不同的事情。在最简单的形式中,它只是调用$scope
对象上的函数。此函数必须返回true
orfalse
。如果过滤器接受传递给它的值,则返回 True。如果过滤器不能接受该值,则返回 False。如果过滤器不能接受该值,则该值不包含在过滤产生的数组中。下面是一个例子:
- {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
此示例调用
filterArray()
过滤掉具有text
值为的属性的项目 的函数two
。下面是一个
orderBy
例子:
- {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
所述
orderBy
过滤器可以接受一个$scope
变量作为参数。在此示例中,该变量名为sortField
。此变量的值是已排序数据对象的属性名称,用于对数据对象进行排序。在此示例中,sortField
属性设置为text
这意味着数据对象的text
属性用于对数据对象进行排序。该
orderBy
过滤器还可以采取的第二$scope
变量作为参数。在此示例中,该变量名为reverse
。该变量的值决定了数据对象是按自然顺序排序,还是按自然顺序排序。在这种情况下,reverse
变量设置为true
,这意味着数据对象将按相反顺序排序。链接过滤器
可以通过简单地在过滤器部分中一个接一个地放置更多过滤器来链接过滤器。链接过滤器时,一个过滤器的输出用作链中下一个过滤器的输入。下面是一个例子:
{{myData.theText | limitTo: 5 | uppercase}}
此示例首先
myData.theText
使用limitTo
过滤器将字符串限制为 5 个字符,然后使用 过滤器将 5 个字符转换为大写uppercase
。将过滤器输出分配给变量
可以将过滤器的输出分配给一个临时变量,然后您可以稍后在视图中引用该变量。下面是一个例子:
- {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
{{filteredItems.length}}此示例将过滤的输出分配给
filteredItems
变量。该示例然后{{ }}
在ol
元素下的指令内引用此变量。实现自定义过滤器
如果 AngularJS 过滤器不适合您的需要,您可以实现自己的过滤器。下面是一个例子:
Filtered: {{myData.text | myFilter}}此示例向 AngularJS 注册了一个过滤器,它可以过滤字符串。过滤器返回字符串的前 3 个字符。过滤器以 name 注册
myFilter
。正如您在过滤器开头看到的那样,您在引用过滤器时必须使用该名称。如果您的过滤器需要更多的输入参数,请在过滤器函数中添加更多参数,并在过滤器名称和
:
引用它时添加参数。下面是一个例子:Filtered: {{myData.text | myFilter :2:5}}注意过滤器引用 (
| myfilter:2:5
) 现在在过滤器名称后面有两个值,每个值用冒号分隔。这两个值作为参数传递给过滤器。还要注意 filter 函数现在如何接受两个名为startIndex
和 的额外参数endIndex
。这两个参数用于确定字符串的哪一部分作为子字符串从过滤器返回到此,关于“Angularjs中的视图和指令介绍”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
分享题目:Angularjs中的视图和指令介绍
链接地址:http://scyanting.com/article/gihepc.html