angularjs绑定属性_AngularJS指令和数据绑定示例教程

angularjs绑定属性

In the previous post, we have successfully created and run our first angular application. Now, we are going to look in to the components used to create an angular application. In this post, we will discuss about Directives, which is one of the core features in AngularJS. From there, we will also look into the Data Binding concepts.

在上一篇文章中，我们已经成功创建并运行了我们的第一个angular应用程序。现在，我们将研究用于创建角度应用程序的组件。在本文中，我们将讨论指令（ AngularJS的核心功能之一）。从那里，我们还将研究数据绑定概念。

内容 (Contents)

Directives and Data Binding concepts 指令和数据绑定概念
Directives and Data binding Examples
1. Using ngApp and ngModel directives
2. Using ngInit and ngRepeat directives
3. Using ngHide and ngShow directives
指令和数据绑定示例
1. 使用ngApp和ngModel指令
2. 使用ngInit和ngRepeat指令
3. 使用ngHide和ngShow指令

指令和数据绑定概念 (Directives and Data Binding concepts)

Directives in AngularJS extend HTML with new behavior. They teach HTML new techniques and can be placed in attributes, element names, class names and comments. For example, we can use the ngBind directive in the following ways.

AngularJS中的指令以新行为扩展了HTML 。他们教授HTML新技术，可以放置在属性，元素名称，类名称和注释中 。例如，我们可以通过以下方式使用ngBind指令。

<ng-bind></ng-bind>
<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<!-- directive: ng-bind exp -->

We have used some of the directives like ng-app, ng-bind and ng-model in our previous post. Generally, directives are prefixed with ng-.

在之前的文章中，我们使用了ng-app ， ng-bind和ng-model等指令。通常，伪指令以ng-为前缀。

In the following example, we can say that span element matches ngbind directive:

在以下示例中，我们可以说span元素与ngbind指令匹配：

Name: <input type="text" ng-model="name">
<span ng-bind="name"></span>

We can also use the following equivalent forms that matches the ngBind directive:

我们还可以使用与ngBind指令匹配的以下等效形式：

<div ng-app>
Name: <input type="text" ng-model="name"><span ng-bind="name"></span><span ng:bind="name"></span><span ng_bind="name"></span><span data-ng-bind="name"></span><span x-ng-bind="name"></span>
</div>

In this tutorial, we will mention some of the directives that are commonly used in every angular application and its usage. You can also go through the AngularJS official API documentation for more details.

在本教程中，我们将提到一些在每个角度应用程序中常用的指令及其用法。您也可以浏览AngularJS官方API文档以获取更多详细信息。

数据绑定 (Data Binding)

Data Binding is the automatic synchronization of View and Model. Most of the template systems support data binding in single direction only. That is, the change in model or other section of the view is not automatically projected in the view or vice versa. In angular, this works differently: Any change in model is reflected in the view and vice versa.

数据绑定是视图和模型的自动同步。大多数模板系统仅支持单方向的数据绑定。也就是说，视图的模型或其他部分的更改不会自动投影到视图中，反之亦然。在角度，这有不同的工作方式：模型的任何更改都会反映在视图中，反之亦然。

指令和数据绑定示例 (Directives and Data Binding Examples)

In this section, we will try different examples to explore some of the directives and data binding concepts. You can find a list of all directives in the official API documentation.

在本节中，我们将尝试不同的示例来探索一些指令和数据绑定概念。您可以在官方API文档中找到所有指令的列表。

使用ngApp和ngModel指令 (Using ngApp and ngModel directives)

We have already seen these concepts in the previous post. Let’s recall that application to demonstrate the use of directives like ng-app, ng-model and how data binds to the view. The following example demonstrates the Directives and Data Binding concepts.

在上一篇文章中，我们已经看到了这些概念。让我们回想一下该应用程序，以演示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>

The directive ng-model makes a property up in the memory called “name” and we can bind to that value using the double braces “{{“. In this example, you can see how the model value is wrapped inside the binding expression {{name}}.

指令ng-model在内存中ng-model了一个名为“ name”的属性，我们可以使用双括号“ {{”将其绑定到该值。在此示例中，您可以看到如何将模型值包装在绑定表达式{{name}}中 。

演示地址

使用ngInit和ngRepeat指令 (Using ngInit and ngRepeat directives)

ng-init : This directive is used to initialize the data.

ng-init ：此伪指令用于初始化数据。

ng-repeat : This directive is used to iterate over a collection of data. Each looping instance gets its own scope and the given variable will hold the value of the current item. The ng-repeat directive exposes several properties like $index, $first, $last, $even, $odd and $middle to each instance.

ng-repeat ：此伪指令用于遍历数据集合。每个循环实例都有自己的作用域，给定变量将保存当前项目的值。 ng-repeat指令向每个实例公开多个属性，例如$ index，$ first，$ last，$ even，$ odd和$ middle 。

$index property is set to the index of the current item in the collection.$ index属性设置为集合中当前项目的索引。
$first property returns true if the repeated element is first in the iterator.如果重复元素是迭代器中的第一个元素，则$ first属性将返回true。
$last property returns true if the repeated element is last in the iterator.如果重复元素在迭代器中位于最后，则$ last属性返回true。
$middle property returns true if the repeated element is between the last and first element in the iterator.如果重复元素位于迭代器的最后一个元素与第一个元素之间，则$ middle属性将返回true。
$even property returns true if the iterator position $index is even.如果迭代器位置$ index为偶数，则$ even属性返回true。
$odd property returns true if the iterator position $index is odd.如果迭代器位置$ index为奇数，则$ odd属性返回true。

The following example demonstrates the ng-init and ng-repeat directives usage.

以下示例演示了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>

In this example, ng-init directive is used to initialize an array of objects called players. The ng-repeat directive iterates over this collection and for each instance, the variable player is set with the current item in the collection and it is displayed using the binding expression {{player.name}} : {{player.country}}. You can also see the index of each item, here the $index property is set to the current item index.

在这个例子中， ng-init指令被用来初始化称为玩家对象的数组。 ng-repeat指令遍历此集合，并且对于每个实例，变量player都设置有该集合中的当前项目，并使用绑定表达式{{player.name}} : {{player.country}} 。您还可以查看每个项目的索引，此处$ index属性设置为当前项目的索引。

You will see the following output in your browser.

您将在浏览器中看到以下输出。

演示地址

使用ngHide和ngShow指令 (Using ngHide and ngShow Directives)

ng-show :This directive is used to display or hide the given HTML element based on the expression given to the ng-show attribute. ng-hide :This directive is used to display or hide the given HTML element based on the expression given to the ng-hide attribute. The following example demonstrates the ng-hide and ng-show directives usage. You could see the welcome text disappears as you type, this is because of the ng-hide directive ng-hide="!name == ''" When you enter the Blog’s name as ‘JournalDev’, a text showing “Happy Learning!” is displayed, this is becuase of the ng-show directive ng-show="name =='JournalDev'"

ng-show ：此指令用于根据给ng-show属性的表达式显示或隐藏给定HTML元素。 ng-hide ：此指令用于基于给ng-hide属性的表达式显示或隐藏给定HTML元素。以下示例演示了ng-hide和ng-show指令的用法。键入时，您会看到欢迎文本消失，这是由于ng-hide指令ng-hide="!name == ''"当您将Blog的名称输入为'JournalDev'时，文本显示为“ Happy Learning！ ” 显示，这是因为ng-show指令ng-show="name =='JournalDev'"

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 <b>JournalDev</b> in the input field to demonstrate ng-show.</p><p>Enter anything n in the input field to demonstrate ng-hide.</b></p><p>  <b>Enter Blog's Name: <input type="text" ng-model="name"><div ng-show="name =='JournalDev'"> Happy Learning!</div><div ng-hide="!name == ''"> Welcome to JournalDev.</div></b></p></body>
</html>

You will see the following output in your browser.

您将在浏览器中看到以下输出。

演示地址

In this tutorial, we have explained some of the directives in AngularJS and the Data Binding concept. That’s all for now and we will look into the AngularJS Controller feature in the coming post.

在本教程中，我们解释了AngularJS中的一些指令和数据绑定概念。 到此为止 ，我们将在下一篇文章中研究AngularJS Controller功能。

翻译自: https://www.journaldev.com/5955/angularjs-directives-data-binding-example-tutorial

angularjs绑定属性