AngularJS指令和数据绑定示例教程
在上一篇文章中，我们已经成功创建并运行了我们的第一个Angular应用程序。
现在，我们将研究用于创建Angular应用程序的组件。
在本文中，我们将讨论指令(AngularJS的核心功能之一)。
从那里，我们还将研究数据绑定概念。
内容
- 指令和数据绑定概念
- 使用ngApp和ngModel指令的指令和数据绑定示例
- 使用ngInit和ngRepeat指令
- 使用ngHide和ngShow指令
指令和数据绑定概念
AngularJS中的指令以新行为扩展了HTML。
他们教授HTML新技术，可以放置在属性，元素名称，类名称和注释中。
例如，我们可以通过以下方式使用ngBind指令。
<ng-bind></ng-bind> <span ng-bind="exp"> <span class="ng-bind: exp;"> <!-- directive: ng-bind exp -->
在上一篇文章中，我们使用了诸如ng-app，ng-bind和ng-model等指令。
通常，伪指令以ng-为前缀。
在下面的示例中，我们可以说spanʻelement匹配ngbind`指令：
Name: <input type="text" ng-model="name"> <span ng-bind="name">
我们还可以使用以下等效形式来匹配ngBind指令：
<div ng-app> Name: <input type="text" ng-model="name"> <span ng-bind="name"> <span ng:bind="name"> <span ng_bind="name"> <span data-ng-bind="name"> <span x-ng-bind="name"> </div>
在本教程中，我们将提到一些在每个Angular应用程序中常用的指令及其用法。
您也可以浏览AngularJS官方API文档以获取更多详细信息。
数据绑定
数据绑定是视图和模型的自动同步。
大多数模板系统仅支持单方向的数据绑定。
也就是说，视图的模型或者其他部分的更改不会自动投影到视图中，反之亦然。
在Angular上，这有不同的工作原理：模型的任何更改都会反映在视图中，反之亦然。
指令和数据绑定示例
在本节中，我们将尝试不同的示例来探索一些指令和数据绑定概念。
您可以在官方API文档中找到所有指令的列表。
使用ngApp和ngModel指令
在上一篇文章中，我们已经看到了这些概念。
让我们回想一下该应用程序，以演示ng-app，ng-model等指令的使用以及数据如何绑定到视图。
以下示例演示了指令和数据绑定概念。
directives-binding.html
<!DOCTYPE html>
<html lang="en">
<title>Angular Directives</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>Enter Some text : <input type="text" ng-model="name"></p>
<p>Hello {{name}}!</p>
</div>
</body>
</html>
指令ng-model在内存中建立了一个名为"名称"的属性，我们可以使用双括号" {{"将其绑定到该值。
在此示例中，您可以看到如何将模型值包装在绑定表达式{{name}}中。
使用ngInit和ngRepeat指令
ng-init：此指令用于初始化数据。
ng-repeat：此伪指令用于遍历数据集合。
每个循环实例都有自己的作用域，给定变量将保存当前项目的值。
ng-repeat指令向每个实例公开多个属性，如$index，$first，$last，$even，$odd和$middle。
$index属性设置为集合中当前项目的索引。
如果重复元素在迭代器中位于第一个，则$first属性返回true。
如果重复元素在迭代器中位于最后，则$last属性返回true。
如果重复元素位于迭代器的最后一个元素与第一个元素之间，则$middle属性返回true。
如果迭代器位置$index为偶数，则$even属性返回true。
如果迭代器位置$index为奇数，则$odd属性返回true。
以下示例演示了ng-init和ng-repeat指令的用法。
directives-binding.html
<!DOCTYPE html>
<html>
<title>Angular Directives - ng-int and ng-repeat</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app>
<div ng-init="players = [{name:'Rooney', country:'England'},
{name:'Neymar', country:'Brazil'},
{name:'Messy', country:'Arjentina'}]">
<p>Name : <input type="text" ng-model="name"> {{name}}</p>
<ul>
<li ng-repeat="player in players">
[{{$index}}] {{player.name}} : {{player.country}}
</li>
</ul>
</div>
</body>
</html>
在此示例中，使用ng-init指令初始化称为玩家的对象数组。
ng-repeat指令会在此集合上进行迭代，并且对于每个实例，变量player均使用该集合中的当前项设置，并使用绑定表达式{{player.name}}：{{player.country }}。
您还可以查看每个项目的索引，此处$index属性设置为当前项目的索引。
使用ngHide和ngShow指令
ng-show：此指令用于根据给ng-show属性的表达式显示或者隐藏给定HTML元素。
ng-hide：此指令用于根据给ng-hide属性的表达式显示或者隐藏给定HTML元素。
以下示例演示了ng-hide和ng-show指令的用法。
键入时，您会看到欢迎文本消失，这是由于ng-hide指令ng-hide ="！name ==当您将Blog的名称输入为" theitroad"时，显示为" "显示，这是因为ng-show指令"ng-show =" name =='theitroad'"
directives-hide-show.html
<!DOCTYPE html> <html ng-app> <head> <title> ng-hide and ng-show Directives</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body ng-app> <p>Enter the Name as theitroad in the input field to demonstrate ng-show.</p> <p>Enter anything n in the input field to demonstrate ng-hide.</p> <p> Enter Blog's Name: <input type="text" ng-model="name"> <div ng-show="name =='theitroad'"> Happy Learning!</div> <div ng-hide="!name == ''"> Welcome to theitroad.</div> </p> </body> </html>
