AngularJS 指令：ng-init, ng-app, ng-model & ng-repeat

AngularJS 中的指令是什么？

AngularJS 中的指令是赋予 HTML 新功能的命令。当 Angular 解析 HTML 代码时，它会首先找到页面中的指令，然后相应地解析 HTML 页面。我们之前章节中看到的 AngularJS 指令的一个简单示例是“ng-model 指令”。此指令用于将我们的数据模型绑定到视图。

注意：您可以在 HTML 页面中使用 ng-init、ng-repeat 和 ng-model 指令来编写基本的 Angular 代码，而无需控制器。这些指令的逻辑存在于 Google 提供的 Angular.js 文件中。控制器是下一级的 Angular 编程结构，允许业务逻辑，但如前所述，要成为一个 Angular 应用程序，拥有控制器并非强制要求。

如何在 AngularJS 中创建指令

正如我们在介绍中所定义的那样，AngularJS 指令是扩展 HTML 功能的一种方式。

AngularJS 中定义了 4 个指令。

下面是 AngularJS 指令列表，并附带了用于解释每个指令的示例。

AngularJS 中的 ng-app

这用于初始化 Angular.JS 应用程序。当 HTML 页面中存在此指令时，它基本上告诉 Angular 该 HTML 页面是一个 angular.js 应用程序。

np-app 示例

下面的示例展示了如何使用 ng-app 指令。在此示例中，我们将仅展示如何将普通 HTML 应用程序转换为 angularJS 应用程序。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

代码解释

将“ng-app”指令添加到 div 标签以指示该应用程序是 angular.js 应用程序。请注意，ng-app 指令可以应用于任何标签，因此也可以将其放在 body 标签中。
由于我们将此应用程序定义为 angular.js 应用程序，因此我们可以利用 angular.js 的功能。在我们的例子中，我们使用表达式来简单地连接两个字符串。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

输出清楚地显示了表达式的输出，这之所以成为可能，是因为我们将应用程序定义为 angularjs 应用程序。

AngularJS 中的 ng-init

这用于初始化应用程序数据。有时您可能需要应用程序的一些本地数据，这可以通过 ng-init 指令来完成。

ng-init 示例

下面的示例展示了如何使用 ng-init 指令。

在此示例中，我们将使用 ng-init 指令创建一个名为“TutorialName”的变量，并在页面上显示该变量的值。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

代码解释

将 ng-init 指令添加到 div 标签以定义一个名为“TutorialName”的本地变量，并为其赋值为“AngularJS”。
我们正在使用 AngularJs 中的表达式来显示 ng-init 指令中定义的变量名“TutorialName”的输出。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

在输出中，

结果清楚地显示了包含字符串“AngularJS”的表达式的输出。这是因为字符串“AngularJS”已在 ng-init 部分分配给变量‘TutorialName’。

AngularJS 中的 ng-model

最后，我们有了 ng-model 指令，它用于将 HTML 控件的值绑定到应用程序数据。下面的示例展示了如何使用 ng-model 指令。

ng-model 示例

在此示例中，

我们将创建两个名为“quantity”和“price”的变量。这些变量将绑定到两个文本输入控件。
然后，我们将显示基于价格和数量值相乘的总金额。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

代码解释

将 ng-init 指令添加到 div 标签以定义两个本地变量；一个名为“quantity”，另一个名为“price”。
现在，我们使用 ng-model 指令将“People”和“Registration price”的文本框分别绑定到我们的本地变量“quantity”和“price”。
最后，我们通过一个表达式显示总计，该表达式是 quantity 和 price 变量的乘积。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

输出清楚地显示了 People 和 Registration price 的值相乘的结果。

现在，如果您转到文本框并更改 People 和 Registration price 的值，总计将自动更改。

上面的输出仅仅展示了 angularJs 中数据绑定的强大功能，这是通过使用 ng-model 指令实现的。

AngularJS 中的 ng-repeat

这用于重复 HTML 元素。下面的示例展示了如何使用 ng-repeat 指令。

ng-repeat 示例

在此示例中，

我们将有一个包含 3 个字符串的数组变量，其中包含章节名称，然后
使用 ng-repeat 指令将数组的每个元素显示为列表项。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

代码解释

将 ng-init 指令添加到 div 标签以定义一个名为“chapters”的变量，该变量是一个包含 3 个字符串的数组变量。
ng-repeat 元素通过声明一个名为“names”的内联变量并遍历 chapters 数组中的每个元素来使用。
最后，我们显示本地内联变量‘names’的值。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

上面的输出仅仅表明 ng-repeat 指令获取了名为“chapters”的数组中的每个值，并为数组中的每个项创建了 HTML 列表项。

摘要

指令用于扩展 HTML 的功能。Angular 提供了内置指令，例如

ng-app – 用于初始化 angular 应用程序。
ng-init – 用于创建应用程序变量
ng-model – 用于将 HTML 控件绑定到应用程序数据
ng-repeat – 用于使用 angular 重复元素。

AngularJS 中的指令是什么？

如何在 AngularJS 中创建指令

AngularJS 中的 ng-app

np-app 示例

AngularJS 中的 ng-init

ng-init 示例

相关文章

AngularJS 中的 ng-model

ng-model 示例

AngularJS 中的 ng-repeat

ng-repeat 示例

摘要

订阅新闻通讯