当前位置：极客教程 > AngularJs > AngularJS 指令 > AngularJS指令

AngularJS指令

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 点击时的自定义步骤
  1. ng-app:
    AngularJS中的ng-app指令是用来定义AngularJS应用程序的根元素。这个指令在页面加载时自动初始化AngularJS应用程序。它可以用来加载AngularJS应用程序中的各种模块。
    例子：这个例子使用ng-app指令来定义一个默认的AngularJS应用程序。
    <html> 
            
    <head> 
        <title>AngularJS ng-app Directive</title> 
        
        <script src= 
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
        </script> 
    </head> 
        
    <body style="text-align:center"> 
            
        <h2 style = "color:green">ng-app directive</h2> 
            
        <div ng-app="" ng-init="name='GeeksforGeeks'"> 
            <p>{{ name }} is the portal for geeks.</p> 
        </div> 
    </body> 
        
    </html>
HTML

输出:
AngularJS指令

  1. ng-init:
    ng-init指令是用来初始化AngularJS应用程序的数据。它定义了AngularJS应用程序的初始值并为变量赋值。
    ng-init指令定义了AngularJS应用程序的初始值和变量。
    例子：在这个例子中，我们初始化一个字符串数组。
     <html> 
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ 
        angular.min.js"></script> 
        <head> 
            <title>AngularJS ng-init Directive</title> 
        </head> 
        <body> 
                <h1 style = "color:green">GeeksforGeeks 
                <h2>ng-init directive</h2> 
                <div ng-app="" ng-init="sort=['quick sort', 'merge sort', 
                 'bubble sort']"> 
                 Sorting techniques: 
                <ul> 
                <li>{{ sort[0] }} </li> 
                <li>{{ sort[1] }} </li> 
                <li>{{ sort[2] }} </li> 
                </ul> 
             </div> 
        </body> 
    </html>
HTML

输出:
AngularJS指令

  1. ng-model:
    ngModel是一个指令，它绑定了输入、选择和文本区域，并将所需的用户值存储在一个变量中，我们可以在需要该值时使用该变量。
    它也在表格的验证过程中使用。
    示例:
     <!DOCTYPE html> 
    <html> 
    <script src= 
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </script> 
    <style> 
        .column { 
            float: left; 
            text-align: left; 
            width: 49%; 
        } 
          
        .row { 
            content: ""; 
            display: table; 
        } 
    </style> 
      
    <body ng-app="myApp"
        ng-controller="myController"> 
        <h4>Input Box-</h4> 
        <div class="row"> 
            <div class="column"> 
                Name- 
                <input type="text"
                    ng-model="name"> 
                <pre> {{ name }} </pre> Checkbox- 
                <input type="checkbox"
                    ng-model="check"> 
                <pre> {{ check }} </pre> Radiobox- 
                <input type="radio"
                    ng-model="choice"> 
                <pre> {{ choice }} </pre> Number- 
                <input type="number"
                    ng-model="num"> 
                <pre> {{ num }} </pre> Email- 
                <input type="email"
                    ng-model="mail"> 
                <pre> {{ mail }} </pre> Url- 
                <input type="url"
                    ng-model="url"> 
                <pre> {{ url }} </pre> 
            </div> 
            <div class="column"> 
                Date: 
                <input type="date" ng-model="date1" (change)="log(date1)"> 
                <pre> Todays date:{{ date1+1 }}</pre> Datetime-local- 
                <input type="datetime-local" ng-model="date2"> 
                <pre> {{ date2+1 }} </pre> Time- 
                <input type="time" ng-model="time1"> 
                <pre> {{ time1+1 }} </pre> Month- 
                <input type="month" ng-model="mon"> 
                <pre> {{ mon+1 }} </pre> Week- 
                <input type="week" ng-model="we"> 
                <pre> {{ we+1 }} </pre> 
            </div> 
        </div> 
    </body> 
    <script> 
        var app = angular.module('myApp', []); 
        app.controller('myController', function(scope) { 
            scope.name = "Hello Geeks!"; 
            scope.check = ""; 
            scope.rad = ""; 
            scope.num = ""; 
            scope.mail = ""; 
            scope.url = ""; 
            scope.date1 = ""; 
            scope.date2 = ""; 
            scope.time1 = ""; 
            scope.mon = ""; 
            scope.we = ""; 
            scope.choice = ""; 
            scope.c = function() { 
            $scope.choice = true; 
            }; 
        }); 
    </script> 
      
    </html>
HTML

输出:
AngularJS指令

  1. ng-controller:
    AngularJS中的ng-controller指令是用来给应用程序添加控制器的。它可以用来添加方法、函数和变量，这些方法、函数和变量可以在一些事件中被调用，如点击等，以执行某些动作。
    示例:
     <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title>ng-controller Directive</title> 
      
        <script src= 
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> 
        </script> 
    </head> 
      
    <body ng-app="app" style="text-align:center"> 
          
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h2>ng-controller Directive</h2><br> 
          
        <div ng-controller="geek"> 
            Name: <input class="form-control" type="text"
                    ng-model="name"> 
            <br><br> 
              
            You entered: <b><span>{{name}}</span></b> 
        </div> 
          
        <script> 
            var app = angular.module('app', []); 
            app.controller('geek', function (scope) { 
                scope.name = "geeksforgeeks"; 
            }); 
        </script> 
    </body> 
      
    </html>
HTML

输出:
AngularJS指令

  1. ng-bind:
    AngularJS中的ng-bind指令用于将任何特定HTML元素的文本内容与给定表达式中输入的值绑定/替换。只要ng-bind指令中的表达式的值发生变化，指定的HTML内容的值就会更新。
     <!DOCTYPE html> 
    <html> 
          
    <head> 
        <title>ng-checked Directive</title> 
      
        <script src= 
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
        </script> 
    </head> 
      
    <body ng-app="gfg" style="text-align:center"> 
          
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h2>ng-bind Directive</h2>         
          
        <div ng-controller="app"> 
            num1: <input type="number" ng-model="num1"
                    ng-change="product()" /> 
            <br><br> 
              
            num2: <input type="number" ng-model="num2"
                    ng-change="product()" /> 
            <br><br> 
              
            <b>Product:</b> <span ng-bind="result"></span> 
        </div> 
          
        <script> 
            var app = angular.module("gfg", []); 
            app.controller('app', ['scope', function (app) { 
                app.num1 = 1; 
                app.num2 = 1; 
                app.product = function () { 
                    app.result = (app.num1 *app.num2); 
                } 
            }]); 
        </script> 
    </body> 
      
    </html>
HTML

AngularJS指令

  1. 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); 
        });
JavaScript

第1行- 创建了一个名为 “myApp “的应用模块，没有任何依赖性。
第3行-我们应用程序的主要控制器。
第4行字符串 “名称 “的数组。

2.创建index.html页面

         <!DOCTYPE html> 
        <html ng-app="myApp"> 
        <head> 
            <title>Angular ng-repeat</title> 
            <script> type="text/javascript" src="jquery-3.2.1.min.js"> 
            </script> 
            <script> type="text/javascript" src="angular.js"></script> 
            <script> type="text/javascript" src="app.js"></script> 
        </head> 
        <body ng-controller="MainCtrl"> 
            <h2>Here is the name list</h2> 
            <ul> 
                <li ng-repeat="name in names"> 
                    {{name}} 
                </li> 
            </ul> 
        </body> 
        </html>
JavaScript

第5行包括所有的依赖性，如jquery、angular-js和app.js文件。
第12行-使用ng-repeat指令，每次从名字数组中获取一个名字并显示。
输出:
AngularJS指令

  1. ng-show:
    AngluarJS的ng-show指令是用来显示或隐藏指定的HTML元素。如果ng-show属性中给定的表达式为真，那么该HTML元素将显示，否则它将隐藏该HTML元素。它被所有的HTML元素所支持。
    例子1：本例使用ng-show指令，在选中复选框后显示HTML元素。
     <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title>ng-show Directive</title> 
          
        <script src= 
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
        </script> 
    </head> 
      
    <body> 
        <div ng-app="app" ng-controller="geek"> 
              
            <h1 style="color:green">GeeksforGeeks</h1> 
            <h2>ng-show Directive</h2> 
              
            <input id="chshow" type="checkbox" ng-model="show" /> 
              
            <label for="chshow"> 
                Show Paragraph 
            </label> 
              
            <p ng-show="show" style="background: green; color: white; 
                    font-size: 14px; width:35%; padding: 10px;"> 
                Show this paragraph using ng-show 
            </p> 
        </div> 
          
        <script> 
            var myapp = angular.module("app", []); 
            myapp.controller("geek", function (scope) { 
                scope.show = false; 
            }); 
        </script> 
    </body> 
      
    </html>
HTML

输出:
在勾选该复选框之前：
AngularJS指令
选中复选框后：
AngularJS指令

  1. ng-readonly:
    AngularJS中的ng-readonly指令用于指定一个HTML元素的只读属性。只有当ng-readonly指令中的表达式返回true时，该HTML元素才是只读的。
    例子：这个例子使用ng-readonly指令来启用readonly属性。
     <!DOCTYPE html> 
    <html> 
        <head> 
            <title>ng-readonly Directive</title> 
              
            <script src= 
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> 
            </script> 
        </head> 
          
        <body ng-app style="text-align:center"> 
            <h1 style="color:green">GeeksforGeeks</h1> 
            <h2>ng-readonly Directive</h2> 
              
            <div> 
                <label>Check to make month readonly: <input type="checkbox"
                ng-model="open"></label> 
                  
                <br><br> 
                  
                Input Month:<input ng-readonly="open" type="month"
                        ng-model="month"> 
            </div> 
        </body> 
    </html>
HTML

输出:
在勾选该复选框之前：
AngularJS指令
选中复选框后：
AngularJS指令

  1. ng-disabled:
    AngularJS中的ng-disabled指令是用来启用或禁用HTML元素的。如果ng-disabled属性内的表达式返回true，那么表单字段将被禁用，反之亦然。它通常适用于表单字段（输入、选择、按钮等）。
    例子1：本例使用ng-disabled指令来禁用按钮。
     <!DOCTYPE html> 
    <html> 
          
    <head> 
        <title>ng-disabled Directive</title> 
      
        <script src= 
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
        </script> 
    </head> 
      
    <body ng-app="app" style="text-align:center"> 
          
        <h1 style="color:green">GeeksforGeeks</h1> 
          
        <h2>ng-disabled Directive</h2> 
          
        <div ng-controller="app" ng-init="disable=false"> 
            <button ng-click="geek(disable)" ng-disabled="disable"> 
                Click to Disable 
            </button> 
              
            <button ng-click="geek(disable)" ng-show="disable"> 
                Click to Enable 
            </button> 
        </div> 
          
        <script> 
            var app = angular.module("app", []); 
            app.controller('app', ['scope', function (app) { 
                app.geek = function (disable) { 
                    app.disable = !disable; 
                } 
            }]); 
        </script> 
    </body> 
      
    </html>
HTML

输出:
在点击按钮之前：
AngularJS指令
点击按钮后：
AngularJS指令

  1. ng-if:
    AngularJS中的ng-if指令是用来根据表达式移除或重新创建部分HTML元素的。ng-if与ng-hide不同，因为它完全删除了DOM中的元素，而不仅仅是隐藏元素的显示。如果它里面的表达式是假的，那么该元素就被移除，如果是真的，那么该元素就被添加到DOM中。
    例子：这个例子在点击按钮后改变内容。
     <!DOCTYPE html> 
    <html> 
          
    <head> 
        <title>ng-hide Directive</title> 
          
        <script src= 
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
        </script> 
    </head> 
      
    <body ng-app="geek" style="text-align:center"> 
          
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
          
        <h2>ng-if Directive</h2> 
          
        <div ng-controller="app as vm"> 
            <div ng-if="!vm.IsShow"> 
                <input type="button" class="btn btn-primary"
                        ng-click="vm.IsShow=!vm.IsShow"
                        value="Sign in"> 
                          
                <p>Click to Sign in</p> 
            </div> 
              
            <div ng-if="vm.IsShow"> 
                <button class="btn btn-primary"
                ng-click="vm.IsShow=!vm.IsShow"> 
                    Sign out 
                </button> 
                  
                <p> 
                    GeeksforGeeks is the computer 
                    science portal for geeks. 
                </p> 
            </div> 
        </div> 
          
        <script> 
            var app = angular.module("geek", []); 
            app.controller('app', ['scope', function (scope) { 
                var vm = this; 
            }]); 
        </script> 
    </body> 
      
    </html>
HTML

输出:
在点击按钮之前。
AngularJS指令
点击按钮后：
AngularJS指令

  1. ng-click:
    AngluarJS中的ng-click指令是用来在元素被点击时应用自定义行为。它可以用来显示/隐藏某些元素，也可以在按钮被点击时弹出警报。
    例子：这个例子使用ng-click指令，在点击元素后显示一个警告信息。
     <!DOCTYPE html> 
    <html> 
          
    <head> 
        <title>ng-click Directive</title> 
      
        <script src= 
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
        </script> 
    </head> 
      
    <body ng-app="geek" style="text-align:center"> 
          
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h2>ng-click Directive</h2> 
          
        <div ng-controller="app"> 
            <button> 
                <a href="" ng-click="alert()"> 
                    Click Here 
                </a> 
            </button> 
        </div> 
          
        <script> 
            var app = angular.module("geek", []); 
            app.controller('app', ['scope', function (app) { 
                $app.alert = function () { 
                    alert("This is an example of ng-click"); 
                } 
            }]); 
        </script> 
    </body> 
      
    </html>
HTML

输出:
在点击按钮之前：
AngularJS指令
点击按钮后：
AngularJS指令

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

AngularJS 指令

登录

找回密码？

注册