AngularJS-指令 - 芒果文档

📌 相关文章

📜 AngularJS-指令

📅 最后修改于: 2020-10-27 02:48:46 🧑 作者: Mango

AngularJS指令用于扩展HTML。它们是以ng -prefix开头的特殊属性。让我们讨论以下指令-

ng- app-此指令启动AngularJS应用程序。
ng-init-该指令初始化应用程序数据。
ng-model-此指令定义了要在AngularJS中使用的变量模型。
ng-repeat-该指令为集合中的每个项目重复HTML元素。

ng-app指令

ng-app指令启动AngularJS应用程序。它定义了根元素。加载包含AngularJS应用程序的网页时，它将自动初始化或引导应用程序。它还用于在AngularJS应用程序中加载各种AngularJS模块。在以下示例中，我们使用

元素的ng-app属性定义默认的AngularJS应用程序。

...

ng-init指令

ng-init指令初始化AngularJS应用程序数据。用于为变量分配值。在下面的示例中，我们初始化了一组国家。我们使用JSON语法定义国家/地区的数组。

...

ng-model指令

ng-model指令定义了在AngularJS应用程序中使用的模型/变量。在下面的示例中，我们定义一个名为name的模型。


   ...
   Enter your Name:

ng-repeat指令

ng-repeat指令为集合中的每个项目重复HTML元素。在以下示例中，我们遍历国家/地区阵列。


   ...
   List of Countries with locale:
   
   
      
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

例

以下示例显示了所有上述指令的使用。

testAngularJS.htm

现场演示

AngularJS Directives
   
   
   
      Sample Application
      
       
         Enter your Name: 
         Hello !
         List of Countries with locale:
      
         
            
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

输出

在网络浏览器中打开文件testAngularJS.htm 。输入您的姓名并查看结果。