AngularJS指令

指令是文档对象模型（DOM）中的标记。指令可以与任何控制器或HTML标签一起使用，这将告诉编译器预期的确切操作或行为。有一些指令是预定义的，但如果开发者想要，他可以创建新的指令（自定义指令）。

下表列出了重要的内置AngularJS指令。

指令

说明

ng-app

AngularJS应用程序的开始。

ng-init

用于初始化一个变量

ng-model

ng-model用于绑定到HTML控件。

ng-controller

将一个控制器附加到视图上。

ng-bind

将值与HTML元素绑定。

ng-repeat

在指定的集合中，每个项目重复一次HTML模板。

ng-show

显示或隐藏相关的HTML元素。

ng-readonly

使得HTML元素成为只读元素

ng-disabled

用于动态地禁用或启用一个按钮

ng-if

移除或重新创建HTML元素

ng-click

点击时的自定义步骤

ng-app:

AngularJS中的ng-app指令是用来定义AngularJS应用程序的根元素。这个指令在页面加载时自动初始化AngularJS应用程序。它可以用来加载AngularJS应用程序中的各种模块。

例子：这个例子使用ng-app指令来定义一个默认的AngularJS应用程序。

ng-app directive

输出:

ng-init:

ng-init指令是用来初始化AngularJS应用程序的数据。它定义了AngularJS应用程序的初始值并为变量赋值。

ng-init指令定义了AngularJS应用程序的初始值和变量。

例子：在这个例子中，我们初始化一个字符串数组。

GeeksforGeeks

ng-init directive

输出:

ng-model:

ngModel是一个指令，它绑定了输入、选择和文本区域，并将所需的用户值存储在一个变量中，我们可以在需要该值时使用该变量。

它也在表格的验证过程中使用。

示例:

ng-controller="myController">

Input Box-

 {{ name }} 

 {{ check }} 

 {{ choice }} 

 {{ num }} 

 {{ mail }} 

 {{ url }} 

 Todays date:{{ date1+1 }}

 {{ date2+1 }} 

 {{ time1+1 }} 

 {{ mon+1 }} 

 {{ we+1 }} 

输出:

ng-controller:

AngularJS中的ng-controller指令是用来给应用程序添加控制器的。它可以用来添加方法、函数和变量，这些方法、函数和变量可以在一些事件中被调用，如点击等，以执行某些动作。

示例:

GeeksforGeeks

ng-controller Directive

输出:

ng-bind:

AngularJS中的ng-bind指令用于将任何特定HTML元素的文本内容与给定表达式中输入的值绑定/替换。只要ng-bind指令中的表达式的值发生变化，指定的HTML内容的值就会更新。

GeeksforGeeks

ng-bind Directive

ng-repeat:

Angular-JS的ng-repeat指令是一个方便的工具，可以重复一组HTML代码若干次，或者在一个项目集合中的每个项目重复一次。

ng-repeat类似于我们在C、C++或其他语言中的循环，但在技术上它为我们正在访问的集合中的每个元素实例化一个模板（通常是一组HTML结构）。Angular维护一个$index变量作为当前正在访问的元素的关键，用户也可以访问这个变量。

示例:

1.为该应用程序创建一个app.js文件。

var app = angular.module('myApp',[]);

app.controller('MainCtrl', function(scope){

scope.names = ['Adam','Steve','George','James','Armin'];

console.log($scope.names);

});

第1行- 创建了一个名为 “myApp “的应用模块，没有任何依赖性。

第3行-我们应用程序的主要控制器。

第4行字符串 “名称 “的数组。

2.创建index.html页面

Here is the name list

• {{name}}

第5行包括所有的依赖性，如jquery、angular-js和app.js文件。

第12行-使用ng-repeat指令，每次从名字数组中获取一个名字并显示。

输出:

ng-show:

AngluarJS的ng-show指令是用来显示或隐藏指定的HTML元素。如果ng-show属性中给定的表达式为真，那么该HTML元素将显示，否则它将隐藏该HTML元素。它被所有的HTML元素所支持。

例子1：本例使用ng-show指令，在选中复选框后显示HTML元素。

输出:

在勾选该复选框之前：

选中复选框后：

ng-readonly:

AngularJS中的ng-readonly指令用于指定一个HTML元素的只读属性。只有当ng-readonly指令中的表达式返回true时，该HTML元素才是只读的。

例子：这个例子使用ng-readonly指令来启用readonly属性。

GeeksforGeeks

ng-readonly Directive

输出:

在勾选该复选框之前：

选中复选框后：

ng-disabled:

AngularJS中的ng-disabled指令是用来启用或禁用HTML元素的。如果ng-disabled属性内的表达式返回true，那么表单字段将被禁用，反之亦然。它通常适用于表单字段（输入、选择、按钮等）。

例子1：本例使用ng-disabled指令来禁用按钮。

GeeksforGeeks

ng-disabled Directive

输出:

在点击按钮之前：

点击按钮后：

ng-if:

AngularJS中的ng-if指令是用来根据表达式移除或重新创建部分HTML元素的。ng-if与ng-hide不同，因为它完全删除了DOM中的元素，而不仅仅是隐藏元素的显示。如果它里面的表达式是假的，那么该元素就被移除，如果是真的，那么该元素就被添加到DOM中。

例子：这个例子在点击按钮后改变内容。

GeeksforGeeks

ng-if Directive

输出:

在点击按钮之前。

点击按钮后：

ng-click:

AngluarJS中的ng-click指令是用来在元素被点击时应用自定义行为。它可以用来显示/隐藏某些元素，也可以在按钮被点击时弹出警报。

例子：这个例子使用ng-click指令，在点击元素后显示一个警告信息。

GeeksforGeeks

ng-click Directive

输出:

在点击按钮之前：

点击按钮后：