深入了解Angularjs中的视图和指令
AngularJS 视图和指令介绍
在第一篇文章中您看到了 AngularJS 如何将应用程序拆分为视图、控制器和模型 (MVC)。本文将深入探讨如何创建 AngularJS 视图。【相关教程推荐：《angular教程》】
在开始之前，让我首先设置一个简单的 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 注入攻击。例如，在聊天应用程序中，有人可能会
此示例创建两个
注意控制器函数如何将 设置
HTML 元素（
ng-switch 指令
此示例包含一个
该
在上面的示例中，控制器函数设置
ng-if 指令
该
ng-include 指令
该
T此示例将文件包含
您可以根据条件包含 HTML 片段。例如，您可以在两个文件之间进行选择，如下所示：
此示例将包括
ng-repeat 指令
该
这是一个简单的
此示例将为数组中的
您还可以迭代从函数调用返回的集合。下面是一个例子：
您可以使用稍微不同的语法迭代 JavaScript 对象的属性：
注意指令的
特殊的 ng-repeat 变量
该
该
的
重复多个元素
到目前为止，您只看到了如何使用
但是，将要重复的元素包装在根元素中可能并不总是可行的。因此 AngularJS 有
此示例将为 中的
上面介绍的一些指令支持过滤。本节将解释过滤的工作原理。
该
注意
格式化过滤器
AngularJS 带有一组内置格式过滤器，可以与插值指令和
这是一个日期过滤器示例：
此示例显示了
这是一个数字过滤器示例：
此示例将
下面是一个小写和大写过滤器示例：
数组过滤器
AngularJS 还包含一组过滤或转换数组的数组过滤器。这些过滤器是：
数组过滤器：
下面是一个
这将
该
此示例调用
下面是一个
所述
该
链接过滤器
可以通过简单地在过滤器部分中一个接一个地放置更多过滤器来链接过滤器。链接过滤器时，一个过滤器的输出用作链中下一个过滤器的输入。下面是一个例子：
此示例首先
将过滤器输出分配给变量
可以将过滤器的输出分配给一个临时变量，然后您可以稍后在视图中引用该变量。下面是一个例子：
此示例将过滤的输出分配给
实现自定义过滤器
如果 AngularJS 过滤器不适合您的需要，您可以实现自己的过滤器。下面是一个例子：
此示例向 AngularJS 注册了一个过滤器，它可以过滤字符串。过滤器返回字符串的前 3 个字符。过滤器以 name 注册
如果您的过滤器需要更多的输入参数，请在过滤器函数中添加更多参数，并在过滤器名称和
注意过滤器引用 (
以上就是深入了解Angularjs中的视图和指令的详细内容，更多请关注毛票票其它相关文章！
span元素。一个有一个ng-show指令，另一个有一个ng-hide指令。这两个指令都查看myData.showIt 布尔变量以确定它们是否应该显示或隐藏span元素。该ng-show 指令将显示元素如果模型值为true，并隐藏元素如果模型值为false。该ng-hide指令将执行相反的操作：span如果模型值为 true，则隐藏元素，如果模型值为 false，则显示它。
myData.showIt为true。这意味着上面的示例将显示第一个 span 元素并隐藏第二个。
span在本例中为元素）使用 CSS 属性隐藏display: none;。这意味着 HTML 元素仍然存在于 DOM 中。它们只是不可见。
ng-switch如果您想根据模型中的数据从 DOM 中添加或删除 HTML 元素，则使用 该指令。下面是一个例子：
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指令可以包括/从DOM删除HTML元素，就像ng-switch指令，但它有一个简单的语法。下面是一个例子：
ng-if和ng-show+ 之间的主要区别ng-hide是 ng-if从 DOM 中完全删除 HTML 元素，而ng-show+ ng-hide只是将 CSS 属性display: none;应用于元素。
ng-include指令可用于将来自其他文件的 HTML 片段包含到视图的 HTML 模板中。下面是一个例子：
angular-included-fragment.html到div具有ng-include属性的 HTML 模板内。注意文件名是如何引用的（单引号）。
fragment-1.htmlifmyData.showIt为 true 和fragment-2.htmlifmyData.showIt为 false。
ng-repeat指令用于迭代一组项目并从中生成 HTML。在初始生成之后，ng-repeat监视用于生成 HTML 的项目的更改。如果项目发生变化，该ng-repeat指令可能会相应地更新 HTML。这包括重新排序和删除 DOM 节点。
ng-repeat例子：
li每个项目创建一个元素myData.items。
(name, value)部分ng-repeat。这会通知 AngularJS 迭代对象的属性。该name 参数将被绑定到的属性名称和value参数将被绑定到的属性值。该name和value参数可以输出到HTML模板，就像任何其他JavaScript变量或对象的属性，你可以从上面的HTML模板见。
ng-repeat指令定义了一组特殊变量，您可以在迭代集合时使用这些变量。这些变量是：
$index变量包含被迭代元素的索引。
$first，$middle并且$last包含根据当前的项目是否正在迭代集合中的第一，中间或最后一个元素的布尔值。如果一个项目既不是第一个也不是最后一个，它就是“中间”。您可以使用这些变量使用例如生成不同的HTML ng-show/ ng-hide，ng-switch， ng-if和ng-include指令如前所述。
ng-repeat. 如果您想重复多个 HTML 元素，您必须将这些元素嵌套在容器元素中，并让容器元素具有该ng-repeat 元素，如下所示：
ng-repeat-start和ng-repeat-end指令，用于标记开始和结束重复的元素。下面是一个例子：
li每个属性重复这两个元素 myData.myObject。
过滤
ng-repeat指令可以接受这样的过滤器：
| filter: itemFilter上面声明的部分。那部分是过滤器定义。该| filter:部分告诉 AngularJS 将过滤器应用于 myData.items数组。该itemFilter是过滤函数的名称。此函数必须存在于$scope对象上，并且必须返回 true 或 false。如果过滤器函数返回 true，则ng-repeat指令使用数组中的元素。如果过滤器函数返回 false，则忽略该元素。下面是一个例子：
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}}
过滤器
说明
limitTo
将数组限制为给定的大小，从数组中的某个索引开始。该
limitTo过滤器也适用于字符串。
filter
通用过滤器。
orderBy
根据提供的条件对数组进行排序。
limitTo例子：
{{myData.theText | limitTo: 3}}
$scope myData.theText变量限制为 3 个字符的长度。如果将此过滤器应用于数组，则该数组将被限制为 3 个元素。
filter过滤器是一种特殊的过滤器，可以做很多不同的事情。在最简单的形式中，它只是调用$scope对象上的函数。此函数必须返回trueor false。如果过滤器接受传递给它的值，则返回 True。如果过滤器不能接受该值，则返回 False。如果过滤器不能接受该值，则该值不包含在过滤产生的数组中。下面是一个例子：
filterArray()过滤掉具有text值为的属性的项目 的函数two。
orderBy例子：
orderBy过滤器可以接受一个$scope变量作为参数。在此示例中，该变量名为sortField。此变量的值是已排序数据对象的属性名称，用于对数据对象进行排序。在此示例中，sortField 属性设置为text这意味着数据对象的text属性用于对数据对象进行排序。
orderBy过滤器还可以采取的第二$scope变量作为参数。在此示例中，该变量名为reverse。该变量的值决定了数据对象是按自然顺序排序，还是按自然顺序排序。在这种情况下，reverse变量设置为true，这意味着数据对象将按相反顺序排序。
{{myData.theText | limitTo: 5 | uppercase}}
myData.theText使用limitTo过滤器将字符串限制为 5 个字符，然后使用 过滤器将 5 个字符转换为大写uppercase 。
filteredItems变量。该示例然后{{ }}在ol元素下的指令内引用此变量。
myFilter。正如您在过滤器开头看到的那样，您在引用过滤器时必须使用该名称。
:引用它时添加参数。下面是一个例子：
| myfilter:2:5) 现在在过滤器名称后面有两个值，每个值用冒号分隔。这两个值作为参数传递给过滤器。还要注意 filter 函数现在如何接受两个名为startIndex和 的额外参数endIndex。这两个参数用于确定字符串的哪一部分作为子字符串从过滤器返回
热门推荐