×

Html & Html5

The World's best Software Development Study Portal

AngularJS Directives


Most of the directives in AngularJS are starting with ng- where ng stands for Angular. AngularJS includes various built-in directives. In addition to this, you can create custom directives for your application.

The following table lists the important built-in AngularJS directives.

Directive Description
ng-app Auto bootstrap AngularJS application.
ng-init Initializes AngularJS variables
ng-model Binds HTML control's value to a property on the $scope object.
ng-controller Attaches the controller of MVC to the view.
ng-bind Replaces the value of HTML control with the value of specified AngularJS expression.
ng-repeat Repeats HTML template once per each item in the specified collection.
ng-show Display HTML element based on the value of the specified expression.
ng-readonly Makes HTML element read-only based on the value of the specified expression.
ng-disabled Sets the disable attribute on the HTML element if specified expression evaluates to true.
ng-if Removes or recreates HTML element based on an expression.
ng-click Specifies custom behavior when an element is clicked.

ng-app

The ng-app directive initializes AngularJS and makes the specified element a root element of the application.

For Example:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
<p>My first Expression: {{ 5+5 }}</p> </div>

</body>
</html>




ng-init

The ng-init directive can be used to initialize variables in AngularJS application.
The following example demonstrates ng-init directive that initializes variable of string, number, array, and object.

Create a variable when initiating the application:
For Example:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
<p>My first Expression: {{ 5+5 }}</p> </div>

</body>
</html>




ng-model

The ng-model directive is used for two-way data binding in AngularJS. It binds <input>, <select> or <textarea>elements to a specified property on the $scope object. So, the value of the element will be the value of a property and vica-versa.

For Example:

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Marky Steven";
});
</script>
</body>
</html>




ng-bind

The ng-bind directive binds the model property declared via $scope or ng-model directive or the result of an expression to the HTML element. It also updates an element if the value of an expression changes. Bind the innerHTML of the <p> element to the variable myText.

For Example:

<div ng-app="" ng-init="myText='Hello World!'">

<p ng-bind="myText"></p>

</div>
</body>
</html>




ng-controller

The ng-controller directive adds a controller to your application. In the controller you can write code, and make functions and variables, which will be parts of an object, available inside the current HTML element. In AngularJS this object is called a scope.

For Example:

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "Marky";
  $scope.lastName = "Steven";
});
</script>
</body>
</html>




ng-repeat

The ng-repeat directive repeats HTML once per each item in the specified array collection.

For Example:

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records">{{x}}</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = [
        "A",
        "B",
        "C",
        "D",
    ]
});
</script>

</body>




ng-if

The ng-if directive creates or removes an HTML element based on the Boolean value returned from the specified expression. If an expression returns true then it recreates an element otherwise removes an element from the HTML document.



readonly

The ng-readonly directive makes an HTML element read-only, based on the Boolean value returned from the specified expression. If an expression returns true then the element will become read-only, otherwise not.



ng-disabled

The ng-disabled directive disables an HTML element, based on the Boolean value returned from the specified expression. If an expression returns true the element will be disabled, otherwise not.