Angular Js

AngularJS
Learn more about AngularJS:
 Introduction to AngularJS
AngularJS is a Javascript open-source front-end structural framework that is mainly used to develop single-page
web applications(SPAs). It is a continuously growing and expanding framework which provides better ways for
developing web applications. It changes the static HTML to dynamic HTML. Its features like dynamic binding and
dependency injection eliminate the need for code that we have to write otherwise. AngularJS is rapidly growing and
because of this reason, we have different versions of AngularJS with the latest stable being 1.7.9. It is also
important to note that Angular is different from AngularJS. It is an open-source project which can be freely used and
changed by anyone. It extends HTML attributes with Directives, and data is bound with HTML.
History of AngularJS: AngularJS was originally developed in 2008-2009 by Miško Hevery and Adam abrons at
Brat Tech LLC, as software for the online JSON storage service, in order to ease to development of the applications
for the enterprise, that has been valued by the megabyte. It is now maintained by Google. AngularJS was released
with version 1.6, which contains the component-based application architecture concept. This release version
removed the Sandbox, which facilitates the security, despite having the various vulnerabilities that have evolved,
which bypassed the sandbox.
Why use AngularJS?
 Easy to work with: All you need to know to work with AngularJS is the basics of HTML, CSS, and
Javascript, not necessary to be an expert in these technologies.
 Time-saving: AngularJs allows us to work with components and hence we can use them again which
saves time and unnecessary code.
 Ready to use a template: AngularJs is mainly plain HTML, and it mainly makes use of the plain HTML
template and passes it to the DOM and then the AngularJS compiler. It traverses the templates and
then they are ready to use.
Key Features: There are numerous features of AngularJS that contribute to creating efficient applications. Some of
the features are described below:
 Model View Controller(MVC): An architecture is basically a software pattern used to develop an
application. It consists of three components:
 Model: This component consists of a database & is responsible for managing the data &
logic of the application. It responds to the request made by the View component & the
instruction given by the Controller component, in order to update itself.
 View: This component is responsible for displaying the application data to the users. The
View is basically the user interface that helps to render the required data to the user, with
the help of the AngularJS expressions.
 Controller: This component is responsible for communicating & interacting between the
Model & the View Component, i.e. its main job is to connect the model and the view
component. It helps to validate the input data by implementing some business logic that
manipulates the state of the data model.
Normally, when we talk about MVC architecture, we have to split our applications into these three components and
then write the code to connect them. However, in AngularJS, all we have to do is split the application into MVC and
it does the rest by itself. It saves a lot of time and allows you to finish the job with less code.
 Data Model Binding: Data Binding in AngularJS is a two-way process, i.e the view layer of the MVC
architecture is an exact copy of the model layer. You don’t need to write special code to bind data to the
HTML controls. Normally, in other MVC architectures, we have to continuously update the view layer
and the model layer to remain in sync with one another. In AngularJs it can be said that the model layer
and the view layer remain synchronized with each other. Like when the data in the model changes, then
the view layer reflects the change and vice versa. It happens immediately and automatically which
helps in making sure that the model and the view are updated at all times.
 Templates: The main advantage of using AngularJS is how it makes use of the templates. Normally
what happens is that the templates are passed by the browser into DOM, then DOM becomes the input
of the AngularJS compiler and then AngularJS traverses the DOM template for rendering instructions
which are called directives. The other siblings of AngularJS work differently as they make use of the
HTML String whereas AngularJs does not manipulate the template strings. Using the DOM is what
gives us the privilege to extend the directive vocabulary or even abstract them into reusable
components.
 Unit Testing ready: The concern of Google’s designer was not only to develop Angular but also to
develop a testing framework called “Karma” which helps in designing unit tests for AngularJS
applications.
Benefits of AngularJS:
Depending Injection: Dependency Injection is a software design pattern. It works on the basis of Inversion of
Control. Inversion control means objects do not create other objects. Instead, they get these objects from an
outside source. The dependent object is not created by the primary object after that then uses its methods. Instead,
an external source creates the dependent object and gives it to the source object for further usage. On the basis of
dependency injection, we create a service to acquire all the information from the database and get into the model
class.
In Angular.JS, dependencies are injected by using an “injectable factory method” or “constructor function”. These
components can be injected with “service” and “value” components as dependencies. The $http service is normally
defined from within the controller in the following manner.
sampleApp.controller ('AngularJSController', function ($scope, $http)
Example: This example illustrates the basic Angular JS by implementing the directive, controller, etc.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS Example</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>

<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>AngularJS Example</h3>
<div ng-app="myApp"
ng-controller="myCtrl"
ng-style="gfgObj">
<input type="text"
ng-model="comName">
<input type="text"
ng-model="detail">
<br> {{comName + " "+detail }}
</div>
</center>
<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
$scope.comName = "GeeksforGeeks";
$scope.detail = "Learning Together!"
$scope.gfgObj = {
"color": "green",
"font-family": "sans-serif",
"font-size": "25px"
}
});
</script>
</body>
</html>
Output:
Pros of AngularJS:
 It facilitates the Two-way Binding that helps to render correspondingly the changes made to the view or
the model.
 It helps to create the responsive web application, along with providing the prototyping that can be
utilized to load the application faster.
 It uses the concept of directive that helps to add the functionality to the application. For this, the overall
length of the code reduces along with discarding the repetition of the code that is specific to perform the
particular task.
Cons of AngularJS:
 As this framework belongs to Javascript, so it is required to have prior knowledge of Javascript.
 If new to this framework, then the debugging the scope can be difficult task.
 Introduction to Angular 7
Angular 7 is a TypeScript based front-end web framework by Google. It enables you to create Single Page
Applications(SPA) with the help of the concept of components. The components in Angular 7 are structured like a
tree i.e. there are parent and child components in which each child component is connected to its respective parent
component.
Single Page Applications:

A single page application is a web application which provide users to a very fast and reactive experience. It contains
menu, buttons, and blocks on a single page and when a user clicks any of them, it dynamically rewrites the current
page instead of loading new pages from the server. This is the reason behind its robustness.
Why Angular 7: There are many advantages of angular 7 which makes it more convenient for use.
Robustness and High Performance:
 Supports most of the languages: Angular can be used as a front-end web development tool for the
programming languages like Node.js, .Net, PHP, Java Struts, Spring and other servers for real time rendering
in just HTML and CSS. It also optimizes the website for better SEO.
 Code optimization: It makes the templates in optimized way for today’s JavaScript virtual machines which
gives the benefits of hand-written code.

 Code splitting: Angular apps are fast and load quickly with the new Component Router (handles routing),
which delivers automatic code-splitting and the user only loads the code required to render the view they
want.
Supports multiple platforms:

 Desktop apps: It allows you to create desktop installed apps on different operating systems i.e. Windows,
Mac or Linux by using the same methods which we use for creating web and native apps.
 Progressive web applications: Progressive web applications are the most common apps which are built
with Angular. It provides modern web platform capabilities to deliver high performance installation apps.
Productive:

 Templates: Provides with simple and smooth UI view with intelligent IDE.
 Angular CLI: Angular CLI provides command line tools start building fast, add components and tests, and
then instantly deploy.
Full Development:

 Testing: Provides with strong unit testing i.e. it provides Karma and Jasmine for unit testing. By using it, you
can check your broken things every time you save.
 Accessibility: In it, you can create accessible applications with ARIA-enabled components, developer guides,
and built-in ally test infrastructure.
 Introduction to Angular 8
Angular 8 is a client-side TypeScript based, front-end web framework by Google. Angular 8 is a great, reusable UI
(User Interface) library for the developers which help in building attractive, steady, and utilitarian web pages and
web application. Angular 8 is a ground-breaking JavaScript framework which makes us able to create an
attractive Single Page Application(SPAs). Its first version was released in 2012 and named as AngularJS.
Angular 8 is the updated version of Angular 2.
Single Page Applications:
A single page application (SPA) is a web application that fits on a single page. All your code (JS, HTML, CSS) is
recovered with a single page load. Also, navigate between pages performed without reviving the entire page. This is
the reason behind its robustness.
Features of Angular 8:
Lazy-loaded modules: Lazy loading is based on the concepts of Angular Routing and it helps bring down the size
of enormous files by lazily loading the data that are required. It uses standard dynamic import syntax instead of a
custom string for lazy-loaded modules. This improvement will boost support from the editors VSCode and
WebStorm, who would be able to evaluate and validate the imports. Likewise, TypeScript and linters will have the
option to distinguish missing or incorrectly spelled modules better.
TypeScript 3.4: Angular 8 supports TypeScript 3.4 and it is required to run Angular 8 project.This update of
dependencies on the tool is an approach to synchronize it with the existing ecosystem. It has the most noteworthy
advantages with regards to creating clean, decipherable JavaScript codes.
Differential Loading by Default: Differential loading in Angular 8.0 is the prime performance improvement in the
update. Differential loading is where browsers will select streamlined or inheritance bundles as indicated by their
capabilities and load the correct one automatically. Additionally, clients will receive the bundle they require. In
Angular 8.0, the ng build command with the –prod extension does the entire bundling. The bundle size for modern
browsers reduces by 7 to 20%.
Web Workers: Web workers are incorporated while constructing the production bundles which are fundamental in
improving the parallelizability and helps increase the performance. Angular 8.0 thus adds building support to CLI
which provides one bundle for every web worker.
Ivy Rendering Engine: Ivy is included in Angular 8.0 only as an opt-in preview for testing. Angular developers can
give it a shot to decide the potential and execution of their Angular application.
 Tree shakable:Unused code is removed so application concentrates on the code it is using.
 Local:Only the components that change are recompiled. This results in quicker compiling
Bazel Support: Bazel provides possibility to build CLI application more efficiently and quickly .The benefit of using
bazel is the incremental steady form and tests. It provides an opportunity to make the backends and frontends with
an equivalent device. It has a likelihood to have remote builds and reserve on the build farm.
Opt-In Usage Sharing: Opt-in sharing telemetry can collect data commands used and the fabricate speed if the
user permits them, which will assist developers to improve later on. With this, the open-source web application
framework will collect anonymous data only when permitted to do.
Router Backward Compatibility:In Angular 8.0, backward compatibility mode is added to Angular router that
assists in creating the way for large projects and make it easier to move to Angular with lazy loading.
CLI Workflow Improvements: The new Builder APIs will take advantage of ng construct, ng test, and ng run a lot
of like Schematics gives tap access to ng new, ng create, ng-include and ng update. The Angular CLI is
consistently improving, and now the ng-build, ng-test, and ng-run are equipped to be extended by 3rd party libraries
and tools. Angular 8.0 comes with a new API that makes modifying and perusing the document much less complex.
Complete Reference:
 AngularJS Directives Complete Reference
Directives are markers in the Document Object Model(DOM). Directives can be used with any of controller or HTML
tag which will tell the compiler what exact operation or behavior is expected. There are some directives present
which is predefined but if a developer wants he can create new directives (custom-directive).
Example: This example uses ng-app Directive to define a default AngularJS application.
<html>
<head>
<title>AngularJS Directives</title>
<script src=
</script>
</head>
<body style="text-align:center">

<h2 style = "color:green">Geeksforgeeks</h2>
<div ng-app="" ng-init="name='GeeksforGeeks'">
<p>{{ name }} is the portal for geeks.</p>
</div>
</body>
</html>
Output:
The following table lists the important built-in AngularJS directives.
Directives Description
ng-app Start of AngularJS application.
ng-init Used to initialise a variable
ng-model ng-model is used to bind to the HTML controls
ng-
controller Attaches a controller to the view
ng-bind Binds the value with HTML element
Repeats HTML template once per each item in the specified

ng-repeat collection.
ng-show Shows or hides the associated HTML element
ng-readonly Makes HTML element read-only
ng-disabled Use to disable or enable a button dynamically
ng-if Removes or recreates HTML element
ng-click Custom step on click
Directives:
 AngularJS | Directives
Directives are markers in the Document Object Model(DOM). Directives can be used with any of controller or HTML
tag which will tell the compiler what exact operation or behavior is expected. There are some directives present
which is predefined but if a developer wants he can create new directives (custom-directive).
The following table lists the important built-in AngularJS directives.
Directives Description
ng-app Start of AngularJS application.

ng-init Used to initialise a variable
ng-model ng-model is used to bind to the HTML controls
ng-
controller Attaches a controller to the view
ng-bind Binds the value with HTML element
Repeats HTML template once per each item in the specified

ng-repeat collection.
ng-show Shows or hides the associated HTML element
ng-readonly Makes HTML element read-only
ng-disabled Use to disable or enable a button dynamically
ng-if Removes or recreates HTML element
ng-click Custom step on click
1. ng-app:
The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This
directive automatically initializes the AngularJS application on page load. It can be used to load various
modules in AngularJS Application.
Example: This example uses ng-app Directive to define a default AngularJS application.
<html>

<head>
<title>AngularJS ng-app Directive</title>

<script src=
</script>
</head>


<h2 style = "color:green">ng-app directive</h2>

</div>
</body>

</html>
2. Output:
3. ng-init:
The ng-init directive is used to initialize an AngularJS Application data. It defines the initial value for an
AngularJS application and assigns values to the variables.
The ng-init directive defines initial values and variables for an AngularJS application.
Example: In this example, we initialize an array of string.
<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>
4. Output:
5. ng-model:
ngModel is a directive which binds input, select and textarea, and stores the required user value in a
variable and we can use that variable whenever we require that value.
It also is used during validations in a form.
Example:
<!DOCTYPE html>
<html>
<script src=
</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>
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>
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>
6. Output:
7. ng-controller:
The ng-controller Directive in AngularJS is used to add controller to the application. It can be used to
add methods, functions and variables that can be called on some event like click, etc to perform certain
action.
Example:
<!DOCTYPE html>
<html>

<head>
<title>ng-controller Directive</title>

<script src=
</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>
8. Output:
9. ng-bind:
The ng-bind directive in AngularJS is used to bind/replace the text content of any particular HTML
element with the value that is entered in the given expression. The value of specified HTML content
updates whenever the value of the expression changes in ng-bind directive.
<!DOCTYPE html>
<html>

<head>
<title>ng-checked Directive</title>

<script src=
</script>
</head>

<body ng-app="gfg" style="text-align:center">

<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"
<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>
10.
11. ng-repeat:
Angular-JS ng-repeat directive is a handy tool to repeat a set of HTML code for a number of times or
once per item in a collection of items. ng-repeat is mostly used on arrays and objects.
ng-repeat is similar to a loop that we have in C, C++ or other languages but technically it instantiates a
template(normally a set of HTML structures) for each element in a collection that we are accessing.
Angular maintains a $index variable as a key to the element which is currently being accessed and the
user can also access this variable.
Example:
1. Create an app.js file for the app.
var app = angular.module('myApp',[]);

app.controller('MainCtrl', function($scope){
$scope.names =
['Adam','Steve','George','James','Armin'];
console.log($scope.names);
});
2. Line 1- Created an app module named “myApp” with no dependencies.

Line 3- Main controller for our application.
Line 4- Array of strings “names”.
3. Create index.html page
<!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>
4. Line 5- Include all the dependencies like jquery, angular-js and app.js file
Line 12- Use ng-repeat directive to get one name from names array at a time and display it.
Output:
12. ng-show:
The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given
expression in ng-show attribute is true then the HTML element will display otherwise it hides the HTML
element. It is supported by all HTML elements.
Example 1: This example uses ng-show Directive to display the HTML element after checked the
checkbox.
<!DOCTYPE html>
<html>

<head>
<title>ng-show Directive</title>

<script src=
</script>
</head>

<body>
<div ng-app="app" ng-controller="geek">

<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>
13. Output:
Before checked the checkbox:
After checked the checkbox:
14. ng-readonly:
The ng-readonly Directive in AngularJS is used to specify the readonly attribute of an HTML element.
The HTML element will be readonly only if the expression inside ng-readonly directive returns true.
Example: This example uses ng-readonly Directive to enable readonly property.
<!DOCTYPE html>
<html>
<head>
<title>ng-readonly Directive</title>

<script src=
</script>
</head>

<body ng-app style="text-align:center">
<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>
15. Output:
Before checked the checkbox:
After checked the checkbox:
16. ng-disabled:
The ng-disabled Directive in AngularJS is used to enable or disable HTML elements. If the expression
inside the ng-disabled attribute returns true then the form field will be disabled or vice versa. It is usually
applied on form field (input, select, button, etc).
Example 1: This example uses ng-disabled Directive to disable the button.
<!DOCTYPE html>
<html>

<head>
<title>ng-disabled Directive</title>

<script src=
</script>
</head>



<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.geek = function (disable) {
$app.disable = !disable;
}
}]);
</script>
</body>

</html>
17. Output:
Before clicking the button:
After clicking the button:
18. ng-if:
The ng-if Directive in AngularJS is used to remove or recreate a portion of HTML element based on an
expression. The ng-if is different from ng-hide because it completely removes the element in the DOM
rather than just hiding the display of the element. If the expression inside it is false then the element is
removed and if it is true then the element is added to the DOM.
Example: This example changes the content after clicking the button.
<!DOCTYPE html>
<html>

<head>
<title>ng-hide Directive</title>

<script src=
</script>
</head>

<body ng-app="geek" style="text-align:center">

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>
19. Output:
Before click on button:
After click on button:
20. ng-click:
The ng-click Directive in AngluarJS is used to apply custom behavior when an element is clicked. It can
be used to show/hide some element or it can popup alert when button is clicked.
Example: This example uses ng-click Directive to display an alert message after clicking the element.
<!DOCTYPE html>
<html>

<head>
<title>ng-click Directive</title>

<script src=
</script>
</head>


<h2>ng-click Directive</h2>

<button>
<a href="" ng-click="alert()">
Click Here
</a>
</button>
</div>

<script>
$app.alert = function () {
alert("This is an example of ng-

click");
}
}]);
</script>
</body>

</html>
21. Output:
Before clicking the button:
After clicking the button:
 AngularJS | ng-list Directive

The ng-list Directive in AngularJS is used for separating input strings and converting them into an array of strings
using a separator. By default, the comma is used as a default separator. But any custom separator can be used as
the value of the ng-list directive.
Syntax:
<element ng-list="delimiter">
Contents...
</element>
The value of ng-list specifies the separator to be used for separating the input string.
Example 1: This example uses the ng-list Directive to convert input into an array.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-list Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js ">
</script>
</head>

<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>ng-list Directive</h2>
<p>Enter Input:
<input type="text"
ng-model="list"
ng-list="-">
</p>
{{list}}
</div>
<script>
app.controller('geek', ['$scope',
function($scope) {
$scope.list = [];
}]);
</script>
</body>
</html>
Output:

Example 2: In this example, when we include the ng-list Directive, then it will convert the text in the input field into
an array.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<h2>ng-list Directive</h2>
<div ng-app="">
<p>
Use a comma to separate the
texts in the input field
</p>
<input ng-model="content" ng-list/>
<pre>{{content}}</pre>
</div>
</body>
</html>
Output:

 AngularJS | ng-disabled Directive
In this article, we will see the AngularJS ng-disabled Directive, along with understanding its implementation
through the illustrations.
The ng-disabled Directive in AngularJS is used to enable or disable the HTML elements. If the expression inside
the ng-disabled attribute returns true then the form field will be disabled or vice versa. It is usually applied on the
form field (i.e, input, select, button, etc). The value of the disabled attribute can’t be set to false, that in turn,
disabled the elements, regardless of their value, in the presence of the disabled attribute in HTML.
Syntax:
<element ng-disabled="expression">
Contents...
</element>
Example 1: This example uses the ng-disabled Directive to disable the button.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body ng-app="app"
style="text-align:center">
GeeksforGeeks
</h1>
<div ng-controller="app"
ng-init="disable=false">
<button ng-click="geek(disable)"
ng-disabled="disable">
Click to Disable
</button>
ng-show="disable">
Click to Enable
</button>
</div>
<script>
app.controller('app', ['$scope', function($app) {
$app.geek = function(disable) {
}
}]);
</script>
</body>
</html>
Output:
ng-disabled Directive
Example 2: This example implements the ng-disabled Directive to enable and disable buttons using the
checkbox.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body ng-app="app"
GeeksforGeeks
</h1>
<h4>
Check it
ng-model="check" />
</h4>
<button type="button"
ng-disabled="!(check)">
Click to submit
</button>
</div>
<script>
app.controller('geek', ['$scope', function($scope) {
$scope.disableClick = function(isDisabled) {
$scope.isDisabled = !isDisabled;
}
}]);
</script>
</body>
</html>
Output:
 AngularJS | ng-mouseup Directive

 AngularJS | ng-keyup Directive
In this article, we will see the AngularJS ng-disabled Directive, along with understanding its implementation
through the illustrations.
The ng-disabled Directive in AngularJS is used to enable or disable the HTML elements. If the expression inside
the ng-disabled attribute returns true then the form field will be disabled or vice versa. It is usually applied on the
form field (i.e, input, select, button, etc). The value of the disabled attribute can’t be set to false, that in turn,
disabled the elements, regardless of their value, in the presence of the disabled attribute in HTML.
Syntax:
<element ng-disabled="expression">
Contents...
</element>
Example 1: This example uses the ng-disabled Directive to disable the button.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body ng-app="app"
GeeksforGeeks
</h1>
<div ng-controller="app"
ng-init="disable=false">
ng-disabled="disable">
Click to Disable
</button>
ng-show="disable">
Click to Enable
</button>
</div>
<script>
$app.geek = function(disable) {
}
}]);
</script>
</body>
</html>
Output:
ng-disabled Directive
Example 2: This example implements the ng-disabled Directive to enable and disable buttons using the
checkbox.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body ng-app="app"
GeeksforGeeks
</h1>
<h4>
Check it
ng-model="check" />
</h4>
<button type="button"
ng-disabled="!(check)">
Click to submit
</button>
</div>
<script>
$scope.disableClick = function(isDisabled) {
$scope.isDisabled = !isDisabled;
}
}]);
</script>
</body>
</html>
Output:
 AngularJS | ng-focus Directive

The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used
to show/hide some element or it can pop up an alert when an element is being focused. It is supported
by <a>, <input>, <select> and <textarea> elements.
Syntax:
<element ng-focus="expression">
Contents...
</element>
Parameter:
 expressions: It specifies what to do when the input gets focused.
Example 1: This example uses the ng-focus Directive to display the text area field.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-focus Directive</title>
<script src=
</script>
</head>

<body ng-app="" style="text-align:center">
<h2>ng-focus Directive</h2>
<a href="" ng-focus="isCheck=true">
Click to proceed.
</a><br>
<div class="row" ng-show="isCheck">
Enter Name:
<input type="text"
ng-focus="isCheck=true"
placeholder="geeksforgeeks" />
</div>
</body>
</html>
Output:

Example 2: This example uses the ng-focus Directive to display focus on the input text field.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-focus Directive</title>
<script src=
</script>
</head>

<body ng-app="app" style="text-align:center;">
GeeksforGeeks
</h1>
<h2>ng-focus Directive</h2>
<div ng-controller="geek"> Input:
<input type="text"
ng-focus="focused = true"
ng-blur="focused = false" />
<pre ng-show="focused">
Input is focused.
</pre>
</div>
<script>
function($scope) {}]);
</script>
</body>
</html>
Output:
 AngularJS | ng-keypress Directive

The ng-keypress Directive in AngluarJS is used to apply custom behavior on a keypress event. It is mainly used
to specify what to do when the keyboard is utilized with a particular HTML element. The order of sequence that the
key is pressed is Keydown, Keypress, and keyup. It is supported by <input>, <select> and <textarea> element.
Syntax:
<element ng-keypress="expression">
Contents...
</element>
Parameter value:
 expression: It tells what to do when the key is pressed.
Example 1: This example uses the ng-keypress Directive in AngularJS to display key values.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-keypress Directive</title>
<script src=
</script>

<script type="text/javascript">
app.controller("geek", function ($scope) {
$scope.getkeys = function (event) {
$scope.keyval = event.keyCode;
};
});
</script>
</head>

<body style="text-align: center">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>ng-keypress Directive</h3>
Enter Text: <input type="text"
ng-keypress="getkeys($event)" />
<br /><br />
<span style="color: Red">
Key Code: {{keyval}}
</span>
</div>
</body>
</html>
Output:

Example 2: This example describes the use of the ng-keypress Directive in AngularJS where it displays the total
number of counts the key is pressed simultaneously.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-keypress Directive</title>
<script src=
</script>
<style>
body {
text-align: center;
font-family: sans-serif;
}

h1 {
color: green;
}
</style>
</head>

<body ng-app="">
<h1>GeeksforGeeks</h1>
<h2>ng-keypress Directive</h2>
<textarea ng-keypress="add = add + 1"
ng-init="add=0" >
</textarea>
<p> {{add}} times key is pressed.</p>
</body>
</html>
Output:

 AngularJS | ng-hide Directive
The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in
the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide
which is used to set the display to none.
Syntax:
<element ng-hide="expression">
Contents...
</element>
Parameter:
 expression: It specifies the element will be hidden if the expression returns true.
Example 1: This example uses the ng-hide Directive to display whether the entered number is a multiple of 5 or
not.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<div ng-controller="geek" ng-init="val=0">
GeeksforGeeks
</h1>
<h2>ng-hide Directive</h2>
Enter a number:
<input type="text" ng-model="val" ng-keyup="check(val)">
<div ng-hide="hide">
<h3>
The number is multiple of 5
</h3>
</div>
<div ng-show="hide">
<h3>
The number is not a multiple of 5
</h3>
</div>
</div>
<script>
$scope.check = function(val) {
$scope.hide = val % 5 == 0 ? false : true;
};
}]);
</script>
</body>
</html>
Output:

Example 2: This example uses the ng-hide Directive to hide content.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body>
<h2>ng-hide Directive</h2>
<input id="chbhide"
type="checkbox"
ng-model="hide" />
<label for="chbhide">
Hide Paragraph
</label>
<p ng-hide="hide"
style="background: green;
color: white;
font-size: 14px;
width:35%;
padding: 10px;">
Hide this paragraph using ng-hide
</p>

</div>
<script>
myapp.controller("geek", function($scope) {
$scope.hide = false;
});
</script>
</body>
</html>
Output:

 AngularJS | ng-dblclick Directive
The ng-dblclick Directive in AngluarJS is used to apply custom behavior when an element is clicked double. It can
be used to show or hide some element or it can popup an alert or change the color of text when it is clicked twice.
This means that the element’s original ondblclick event will not be overridden by this directive, both will be
executed.
Syntax:
<element ng-dblclick="expression">
Content...
</element>
Example 1: This example uses the ng-dblclick Directive in AngularJS to display the alert message after clicking
the button doubled.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-dblclick Directive</title>
<script src=
</script>
</head>

<h3>ng-dblclick Directive</h3>
<button>
<a href="" ng-dblclick="alert()">
Click Here
</a>
</button>
</div>

<script>
$app.alert = function () {
alert("This is an example of ng-dblclick");
}
}]);
</script>
</body>
</html>
Output:

Example 2: This example illustrates the ng-dblclick Directive in AngularJS to change the text color after clicking it
doubled.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-dblclick Directive</title>
<script src=
</script>
<style type="text/css">
.green {
color: green;
}
</style>
</head>

<h3>ng-dblclick Directive</h3>
<div>
<p ng-dblclick="col=!col" ng-class="{green:col}">
GeeksforGeeks is the computer science
portal for geeks.
</p>

</div>
</body>
</html>
Output:
 AngularJS | ng-mousedown Directive
The ng-mousedown Directive in AngularJS is used to apply custom behavior when mousedown event occurs on a
specific HTML element. It can be used to show a popup alert when the mouse button is pressed down. It is
supported by all HTML elements.
Syntax:
<element ng-mousedown="expression">
Contents...
</element>
Parameter:
 expression: When the mouse button is clicked then the expression will be executed.
Example 1: This example uses ng-mousedown Directive to set the style of an element after clicking the mouse.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title>ng-mousedown Directive</title>
</head>

<h2>ng-mousedown Directive</h2>
<div>
<p ng-mousedown="geek={'color':'green',
'font-size':'larger'}"
ng-mouseup="geek={'font-size':''}"
ng-style="geek"
ng-class="'button'">
Hold mouse click to see effect.
</p>

</div>
</body>
</html>
Output:

Example 2: This example uses the ng-mousedown Directive to display an alert message after clicking the input
area.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title>ng-mousedown Directive</title>
</head>

<h2>ng-mousedown Directive</h2>
Input:
<input type="text"
ng-mousedown="alert()"
ng-model="click" />
</div>

<script>
$scope.click = 'geeksforgeeks';
$scope.alert = function () {
alert($scope.click);
}
}]);
</script>
</body>
</html>
Output:

 AngularJS | ng-change Directive
The ng-change Directive in AngularJS is used whenever the value of an input element changes. The expression is
evaluated immediately whenever there is a change in the input value. It requires an ng-model directive to be
present. It is triggered whenever there is any single change in the input. It can be used with input elements
like <input>, <textarea>, <checkbox> and <select>.
Syntax:
<element ng-change="expression">
Contents...
</element>
Parameter Value:
 expression: It refers to the expression to execute whenever the value of input changes.
Example 1: This example uses the ng-change Directive to display/hide some content using the checkbox.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-change Directive</title>
<script src=
</script>

<script type="text/javascript">
var app = angular.module('geek', []);
app.controller('app', function ($scope) {
$scope.show = function () {
if ($scope.check == true)
$scope.result = true;
else $scope.result = false;
}
});
</script>
</head>

<body style="padding: 30px">
<div ng-app="geek" ng-controller="app">
GeeksforGeeks
</h1>

<h2>ng-change Directive</h2>

Check to show/hide details
<input type="checkbox" ng-change="show()"-
ng-model="check">
<br><br>
<div style="padding:10px;
border:1px solid black;
width:30%;color:green"
ng-show='result'>
</div>
</div>
</body>
</html>
Output:

Example 2: This example returns the number of times the state of the checkbox is changed and also the current
state of the checkbox.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-change Directive</title>
<script src=
</script>
</head>

<h3>ng-change Directive</h3>
<div ng-controller="prop">
<div>
Are you a developer:
ng-model="isTrue"
ng-change="cnt=cnt+1"
ng-init="cnt=0" />
</div>
Count: {{cnt}}
<pre>{{isTrue}}</pre>
</div>

<script>
app.controller('prop', ['$scope', function ($app) {
$app.isTrue = false;
}]);
</script>
</body>
</html>
Output:

 AngularJS | ng-maxlength Directive
The ng-maxlength Directive in AngularJS is used to set the maximum length for an input field i.e it adds the
restriction for an input field. It is different from maxlength attribute in HTML because the former prevents users from
exceeding the limit whereas the later doesn’t do that. It will make the form invalid if the input limit exceeds it.
Syntax:
<element ng-maxlength="expression">
Contents...
</element>
Parameter value:
 expression: This is a number denoting the maximum limit up to which the input is valid.
Example: This example uses the ng-maxlength Directive to check the maximum length of the string.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-maxlength Directive</title>
<script src=
</script>
</head>

<h3>ng-maxlength Directive</h3>
<div ng-app="app"
ng-controller="geek">
<form name="maxlen"
novalidate ng-submit="maxlen.$valid &&maxlength()">
<pre>Atmax 5 characters required</pre>
Input:
<input type="text"
name="code"
ng-model="txt"
ng-maxlength="5" required />
<br><br>
<button type="submit">Click it</button>
<br><br>
<span>{{msg}}</span>
</form>
</div>

<script>
$scope.maxlength = function () {
$scope.msg = "Input is valid";
};
});
</script>
</body>
</html>
Output:

Example 2: This example describes the usage of the ng-maxlength Directive in AngularJS by displaying the error
message if the length of the text exceed from 20 letters.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<style>
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
color: green;
}

h4 {
font-size: 25px;
color: rgb(239, 58, 58);
}
</style>
</head>

<body ng-app="">
<h3>ng-maxlength Directive</h3>
<form name="gfgFormData">
<p>
Add content more than 20
letters in the textarea:
</p>
<textarea type="textarea"
name="geeks"
ng-model="geeks"
ng-maxlength="20">
</textarea>
<h4 ng-if="!gfgFormData.geeks.$valid">
Entered text length is more than 20 letters
</h4>
</form>
</body>
</html>
Output:

 AngularJS | ng-blur Directive
The ng-blur Directive in AngularJS is fired when an HTML element loses their focus. It doesn’t override with
element’s original onblur event i.e. both the ng-blur expression and original onblur event will execute.
Syntax:
<element ng-blur="expression">
Contents...
</element>
Parameter:
 expression: It refers to the variable or the expression to be evaluated.
Note: The ng-blur directive is supported by <input>, <a>, <select> and <textarea>.
Example 1: This example displays the text message “Enter your text here” when the input is focused and hides it
when the input focus loses.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-blur Directive</title>

<script src=
</script>
</head>

<div ng-app="app">
<div ng-controller="gfg">
<h3>ng-blur Directive</h3>
<h5 ng-show="msg">Enter your text here</h5>
<input type="text"
ng-focus="msg=true"
ng-blur="msg=false" />
</div>
</div>
<script>
app.controller('gfg', ['$scope',
function ($fun, $timeout) {
$fun.msg = false;
}]);
</script>
</body>
</html>
Output:

Example 2: This example counts the number of times focus is removed from the textarea.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-blur Directive</title>
<script src=
</script>
</head>

<h3>ng-blur Directive</h3>
<textarea ng-blur="count = count + 1"
ng-init="count=0">
</textarea>
<h3>Number of times focus losed: {{count}}</h3>
</body>
</html>
Output:
 AngularJS | ng-controller Directive
The ng-controller Directive in AngularJS is used to add a controller to the application. It can be used to add
methods, functions, and variables that can be called on some event like click, etc to perform certain actions.
Syntax:
<element ng-controller="expression">
Contents...
</element>
Parameter value:
 expression: It refers to the name of the controller.
Example 1: This example uses the ng-controller Directive to display the input elements.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<h2>ng-controller Directive</h2>
<br>
Name:
<input class="form-control" type="text" ng-model="name">

<br><br>
You entered:
<b>
<span>{{name}}</span>
</b>
</div>
<script>
app.controller('geek', function($scope) {
$scope.name = "geeksforgeeks";
});
</script>
</body>
</html>
Output:
Example 2: This example uses the ng-controller Directive to display content after clicking the button.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

GeeksforGeeks
</h1>
<button class="btn btn-default"
ng-click="best()">
Button 1
</button>
ng-click="notbest()">
Button 2
</button>
<br>
<p>Quick sort is <b>{{res}}</b>.</p>
</div>
<script>
app.controller('app', function($scope) {
$scope.best = function() {
return $scope.res = "best";
};
$scope.notbest = function() {
return $scope.res = "not always good";
};
});
</script>
</body>
</html>
Output:
 AngularJS | ng-mouseleave Directive
The ng-mouseleave directive in AngularJS is used to apply custom behavior when a mouse-leave event occurs
on a specific HTML element. It can be used to show a popup alert when the mouse leaves a specific position in an
HTML element. It is supported by all HTML elements.
Syntax:
<element ng-mouseleave="expression">
content ...
</element>
Parameter:
 expression: When the mouse cursor leaves an element, then this expression will execute.
Example 1: This example describes the ng-mouseleave Directive in AngularJS.

 HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>ng-mouseleave Directive</title>
</head>
<body ng-app="" style="text-align: center">
<h3>ng-mouseleave Directive</h3>
<div>price :</div>
<div ng-hide="leave"
ng-mouseenter="leave=true">
<span class="amount">$ {{price}}</span>

</div>
<div ng-show="leave"
ng-mouseleave="leave=false">
class="form-control"
ng-model="price"
ng-init="price=250" />
</div>
</body>
</html>
Output:
Example 2: This example describes the ng-mouseleave Directive in AngularJS, by specifying the <input> tag that
has the ng-mouseleave directive containing the alert() function which helps to display the data in the alert message.

 HTML
<!DOCTYPE html>
<html>
<head>
<title>ng-mouseleave Directive</title>
<script src=
</script>
</head>
<h3>ng-mouseleave Directive</h3>
Input:
<input type="text"
ng-mouseleave="alert()"
ng-model="click" />
</div>
<script>
app.controller('app', ['$scope', function

($scope) {
}
}]);
</script>
</body>
</html>
Output:

 AngularJS | ng-bind Directive

The ng-bind Directive in AngularJS is used to bind/replace the text content of any particular HTML element with
the value that is entered in the given expression. The value of specified HTML content updates whenever the value
of the expression changes in the ng-bind directive.
Syntax:
<element ng-bind="expression">
Contents...
</element>
Parameter value:
 expression: It is used to specify the expression to be evaluated or the variable.
Example 1: This example implements the ng-bind Directive to bind the product of two numbers to the <span>
element.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-bind Directive</title>
<script src=
</script>
</head>

<body ng-app="gfg" style="text-align:center">
GeeksforGeeks
</h1>
<h3>ng-bind Directive</h3>
num1:
<input type="number" ng-model="num1"
<br><br>
num2:
<input type="number" ng-model="num2"
<br><br>
<b>Product:</b>
<span ng-bind="result"></span>
</div>

<script>
var app = angular.module("gfg", []);
$app.num1 = 1;
$app.num2 = 1;
$app.product = function() {
$app.result = ($app.num1 * $app.num2);
}
}]);
</script>
</body>
</html>
Output:

Example 2: This example implements the ng-bind Directive to bind the innerHTML of the <span> element to the
variable text.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-bind Directive</title>
<script src=
</script>
</head>

GeeksforGeeks
</h1>
<h3>ng-bind directive</h3>
<div ng-app=""
ng-init="txt='GeeksforGeeks';col='green'">
<div>
<span ng-bind="txt"></span>
is the computer science portal for geeks.
</div>
</div>
</body>
</html>
Output:
 AngularJS | ng-mouseenter Directive
The ng-mouseenter directive in AngularJS is used to apply custom behavior when a mouse-enter event occurs on
a specific HTML element. It can be used to show a popup alert when the mouse enters a specific position in an
HTML element. It is supported by all HTML elements.
Syntax:
<element ng-mouseenter="expression">
Content ...
</element>
Parameter value:
 expression: The expression will execute only when the mouse cursor enters the specific region of an
element.
Example 1: This example describes the use of the ng-mouseenter Directive in AngularJS by counting the number
of times the mouse enters the specific area of an element.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
angular.min.js"></script>
<title>ng-mouseenter Directive</title>

.outerDiv {
width: 100px;
height: 100px;
background-color: green;
margin-left: 40px;
}
</style>
</head>

<body ng-app style="padding:30px">
<h2>ng-mouseenter Directive</h2>
<div class="outerDiv"
ng-mouseenter="oc=oc+1;outer=true"
ng-mouseleave="outer=false">
<p style="text-align:center;color:white">Mouse
{{outer==true?'Enter':'Out'}}
</p>

<br />
<p style="text-align:center;color:white">
{{oc}}<br />
</p>

</div>
</body>
</html>
Output:

Example 2: This example describes the use of the ng-mouseenter Directive in AngularJS by displaying the alert
message by entering into the input element’s region.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title>ng-mouseenter Directive</title>
</head>

<h2>ng-mouseenter Directive</h2>

Input: <input type="text"
ng-mouseenter="alert()"
ng-model="click" />
</div>
<script>
}
}]);
</script>
</body>
</html>
Output:

 AngularJS | ng-click Directive
The ng-click Directive in AngluarJS is used to apply custom behavior when an element is clicked. It can be used
to show/hide some element or it can pop up an alert when the button is clicked.
Syntax:
<element ng-click="expression">
Contents...
</element>
Parameter Value:
 expression: It specifies when the particular element is clicked then the specific expression will be
evaluated.
Supported tag: It is supported by all the elements in HTML.
Example 1: This example illustrates the implementation of the ng-click Directive to display an alert message after
clicking the element.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body ng-app="geek"
GeeksforGeeks
</h1>
<button>
<a href=""
ng-click="alert()">
Click Here
</a>
</button>
</div>
<script>
$app.alert = function() {
alert("This is an example of ng-click");
}
}]);
</script>
</body>
</html>
Output:
ng-click Directive
Example 2: This example illustrates the implementation of the ng-click Directive to display some content after
clicking the element.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body ng-app=""
GeeksforGeeks
</h1>
<form name="form">
<div ng-hide="isShow">
Enter Name:
<input type="text" required
ng-model="Name" />
<br><br>
<input type="button"
ng-disabled="form.$invalid"
ng-click="isShow = true"
value="Sign in" />
</div>
<div ng-show="isShow">
Sign in successful.<br>
ng-click="isShow = false;Name=''"
value="Logout" />
</div>
</form>
</body>
</html>
Output:
 AngularJS | ng-copy Directive
The ng-copy Directive in AngularJS is used to specify the custom behavior functions during the copy of the text in
input text fields. It can be used when we want to call a function that will be triggered when the text is copied from
the input field. It is supported by all input elements. The element’s original oncopy event will not be overridden with
the ng-copy directive when both are executing.
Syntax:
<element ng-copy="expression">
Contents...
</element>
Parameter:
 expression: It specifies what to do when the element is copied.
Example 1: This example uses the ng-copy Directive to display a message when an element will copy.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-copy Directive</title>
<script src=
</script>
<style>
body {
text-align: center;
}

h1 {
color: green;
}
</style>
</head>

<body ng-app="">
<h2>ng-copy Directive</h2>
<div ng-init="isCopy=false; copy='Copy this text!'">
<textarea ng-copy="isCopy=true" ng-model="copy">
</textarea><br>
<pre>Copied status: {{isCopy}}</pre>
</div>
</body>
</html>
Output:

Example 2: This example describes the use of the ng-copy Directive in AngularJS where it specifies that the
number of times the given text will be copied, its total count will be displayed accordingly.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-copy Directive</title>
<script src=
</script>
<style>
body {
text-align: center;
}

h1 {
color: green;
}
</style>
</head>

<body ng-app="">
<h2>ng-copy Directive</h2>
<p>Copy the "GeeksforGeeks" text</p>
<input ng-copy="copy = copy + 1"
ng-init="copy=0"
value="GeeksforGeeks" />
<p> {{copy}} times text copied.</p>
</body>
</html>
Output:

 AngularJS | ng-mousemove Directive
The ng-mousemove Directive in AngularJS is used to apply custom behavior when mousemove event occurs on a
specific HTML element. It can be used to display a popup alert when the mouse moves over a specific HTML
element. It is supported by all HTML elements.
Syntax:
<element ng-mousemove="expression">
Contents...
</element>
Parameter value:
 expression: This parameter depicts when the mouse cursor is moved over the element then the
expression will be executed.
Example 1: This example uses the ng-mousemove Directive to change the CSS style.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-mousemove Directive</title>
<script src=
</script>
</head>

<body ng-app="app" style="padding-left:30px;">
<h2>ng-mousemove Directive</h2>
<div style="height:20px;width:20px; "
ng-style="{'backgroundColor':'lightgreen',
width:X+'px',
height:Y+'px' }"
ng-mousemove="down($event)"></div>
<pre ng-show="X">Current position: {{X}}, {{Y}}</pre>
</div>

<script>
app.controller('geek', ['$scope', function ($scope) {
$scope.down = function (event) {
$scope.X = event.clientX;
$scope.Y = event.clientY;
};
}]);
</script>
</body>
</html>
Output:

Example 2: This example uses the ng-mousemove Directive to display the alert message.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-mousemove Directive</title>
<script src=
</script>
</head>

<h2>ng-mousemove Directive</h2>
Input: <input type="text"
ng-mouseleave="alert()"
ng-model="click" />
</div>

<script>
}
}]);
</script>
</body>
</html>
Output:
 AngularJS | ng-minlength Directive

The ng-minlength Directive in AngularJS is used to set the minimum length for an input field i.e it adds the
restriction for an input field. It is different from minlength attribute in HTML because the former prevents users from
entering less than the specified limit whereas the later doesn’t do that. It makes the form invalid if the entered input
is less than the specified limit.
Syntax:
<element ng-minlength="expression">
content...
</element>
Parameter:
 expression It specifies the number denoting the minimum limit below which the input is invalid.
Example 1: This example uses the ng-minlength Directive to set the minimum length of the string.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-minlength Directive</title>
<script src=
</script>
</head>

<h2>ng-minlength Directive</h2>
<form name="minlength" novalidate
ng-submit="minlength.$valid &&check()">
<pre>Minimum 5 characters required</pre>
Input:
<input type="text"
name="code"
ng-model="txtpin"
ng-minlength="5" required />
<br><br>
<button type="submit">Click it</button>
<br><br>
<span>{{msg}}</span>
</form>
</div>
<script>
$scope.check = function() {
$scope.msg = "Input is valid";
};
});
</script>
</body>
</html>
Output:

Example 2: In this example, we will render the warning message if the entered character is less than 5 in the input
field with the help of the ng-minlength Directive.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<h3>ng-minlength Directive</h3>
<form name="gfgData">
<input name="inputData"
ng-model="inputData"
ng-minlength="5">
<h3 ng-if="!gfgData.inputData.$valid">
Entered value is too short!!!
</h3>
</form>
</body>
</html>
Output:

 AngularJS | ng-checked Directive
The ng-checked Directive in AngularJS is used to read the checked or unchecked state of the checkbox or radio
button to true or false. If the expression inside the ng-checked attribute returns true then the checkbox/radio button
will be checked otherwise it will be unchecked.
Syntax:
<input type="checkbox|radio"
ng-checked="expression">
Contents...
</input>
If the expression returns true then the element’s checked attribute will be checked.
Example: This example uses the ng-checked Directive to select the checkbox and return the all selected checkbox
value.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>
ng-checked Directive
</title>
<script src=
</script>
</head>

<body ng-app="app">
GeeksforGeeks
</h1>
<h3>ng-checked Directive</h3>
ng-checked=
"check1 && check2 && check3 && check4 && check5"
ng-model="isChecked" />
<b>Select All</b><br>
ng-model="check1"
ng-checked="isChecked" />First
<br>
ng-model="check2"
ng-checked="isChecked" />Second
<br>
ng-model="check3"
ng-checked="isChecked" />Three
<br>
ng-model="check4"
ng-checked="isChecked" /> Four
<br>
ng-model="check5"
ng-checked="isChecked" />Five
<br>
<b>isAllSelected = {{isChecked}}</b>
</div>
<script>
app.controller('geek',
['$scope', function($scope) {}]);
</script>
</body>
</html>
Output:

Example: This example describes the ng-checked Directive to check & uncheck all at once.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>
ng-checked Directive
</title>
<script src=
</script>
</head>

<body ng-app="app">
GeeksforGeeks
</h1>
<h3>ng-checked Directive</h3>
ng-checked="checkMe" />DSA
<br />
ng-checked="checkMe" />Web Tech
<br />
ng-checked="checkMe" />
Programming Language
<br />
<button value="Check"
ng-click="check()">
Check
</button>
<button value="Uncheck"
ng-click="uncheck()">
Uncheck
</button>
</div>
<script>
var clickModify = angular.module('app', []);
clickModify.controller('geek', ['$scope', '$http',
function($scope, $http) {
$scope.checkMe = true;
};
$scope.uncheck = function() {
$scope.checkMe = false;
};
},
]);
</script>
</body>
</html>
Output:

 AngularJS | ng-if Directive
The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an
expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM
rather than just hiding the display of the element. If the expression inside it is false then the element is removed and
if it is true then the element is added to the DOM.
Syntax:
<element ng-if="expression">
Contents...
</element>
Parameter Value:
 expression: It will return false if an expression completely removes the element, & returns true if a copy of
the element will be inserted instead, or the element will be created.
Example 1: This example changes the content after clicking the button.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-if Directive</title>
<script src=
</script>
</head>

GeeksforGeeks
</h1>

<div ng-controller="app as vm">
<div ng-if="!vm.IsShow">
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">
ng-click="vm.IsShow=!vm.IsShow">
Sign out
</button>
<p>
</p>
</div>
</div>

<script>
var vm = this;
}]);
</script>
</body>
</html>
Output:

Example 2: This example added some content that will render the content when checking the checkbox.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-if Directive</title>
<script src=
</script>

<style>
.geek {
border: 1px solid black;
padding: 10px;
font-size: 15px;
color: white;
width: 50%;
background: green;
}
</style>
</head>

<body ng-app style="padding:30px">
GeeksforGeeks
</h1>

<div>
ng-model="showDiv" />
<label for="showDiv">
Check it
</label>
<br><br>
<div class="geek" ng-if="showDiv">
GeeksforGeeks is the computer science
portal for geeks.
</div>
</div>
</body>
</html>
Output:
 AngularJS | ng-cut Directive

The ng-cut Directive in AngularJS is used to specify the custom behavior functions when the text in input fields is
cut. It can be used when we want to call a function that will be triggered when the text is cut from the input field. It is
supported by all input elements.
Syntax:
<element ng-cut="expression"> Contents... </element>
Parameter:
 expression: It specifies what to do when the input is cut.
Example 1: This example uses the ng-cut Directive to display a message when cutting the input text element.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-cut Directive</title>
<script src=
</script>
<style>
body {
text-align: center;
}

h1 {
color: green;
}
</style>
</head>

<h3>ng-cut Directive</h3>
<div ng-init="iscut=false;cut='Cut this text!'">
<textarea ng-cut="iscut=true" ng-model="cut">
</textarea><br>
<pre>Cut status: {{iscut}}</pre>
</div>
</body>
</html>
Output:

Example 2: This example implements the ng-cut Directive to display the number of times the message cuts from
the input text element.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-cut Directive</title>
<script src=
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>

<body ng-app="">
<h3>ng-cut Directive</h3>
<p>Cut the "GeeksforGeeks" text</p>
<input ng-cut="cut = cut + 1"
ng-init="cut=0"
<p> {{cut}} times text cut.</p>
</body>
</html>
Output:
 AngularJS | ng-readonly Directive

The ng-readonly Directive in AngularJS is used to specify the readonly attribute of an HTML element. The HTML
element will be readonly only if the expression inside the ng-readonly directive returns true. The ng-readonly
directive is required to change the value between true and false. In case, if the readonly attribute is set to false,
then the presence of the readonly attribute makes the element readonly, irrespective of its value.
Syntax:
<element ng-readonly="expression">
Contents...
</element>
Parameter:
 expression: It returns true if the expression sets the element’s readonly attribute.
This directive is supported by <input>, <textarea> elements.
Example 1: This example uses ng-readonly Directive to enable readonly property.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<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>
Output:

Example 2: This example uses the ng-readonly Directive to enable the readonly property in option list.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<div>
<button ng-click="edit=true">Edit</button>
<button ng-init="edit=false" ng-click="edit=false">
Update
</button>
</div>
<br>
<div>Select sorting algorithm</div><br>
<div>
<select class="form-control"
ng-disabled="!edit"
ng-init="status=1"
ng-model="status"
ng-options="s.id as s.set for s in set">
</select>
</div>
</div>

<script>
$scope.set = [{ id: 1, set: 'Merge sort' },
{ id: 2, set: 'Quick sort' },
{ id: 3, set: 'Bubble sort' }];
}]);
</script>
</body>
</html>
Output:
 AngularJS | textarea Directive

The <textarea> element’s behavior can be controlled & manipulated with the help of AngularJS data-binding. For
this, the ng-model attribute is used with this element. Textarea elements provide validation and basic state control.
The ng-model attribute makes reference to text-directive. The current state of textarea elements is held by Angular
JS. The list of states of the Textarea directive is described below:
 $touched: It signifies a touched field.
 $untouched: It signifies an untouched field.
 $valid: It signifies valid field content.
 $invalid: It signifies invalid field content.
 $dirty: It signifies a modification in field content.
 $pristine: It signifies unmodified field content.
Syntax:
<textarea ng-model="name"></textarea>
Properties: Classes are used to style Textarea elements depending on the state they hold. The ng-model attribute
is used to make reference to text-directive. Listed below are the commonly used classes:
 ng-touched: It signifies class applied on the touched field.
 ng-untouched: It signifies class applied on the untouched field.
 ng-valid: It signifies class applied on valid field content.
 ng-invalid: It signifies class used for invalid field content.
 ng-pristine: It signifies class used for the state having a modification in the field.
 ng-dirty: It signifies class used with unmodified field content.
Return Value: It returns the text, the user has entered in the text field.
Example 1: This example describes the basic usage of the textarea Directive in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<style>
body {
text-align: center;
}

h1 {
color: green;
}

textarea.ng-valid {
color: green;
background-color: lightgreen;
}

textarea.ng-invalid {
background-color: lightblue;
}
</style>
</head>

<body ng-app="">
<h3>Textarea Directive</h3>
<p><b>Textarea field:</b></p>
<textarea placeholder="Start typing..."
ng-model="gfg" required>
</textarea>
</body>
</html>
Output:

Example 2: In this example, we have used the .ng-pristine class, which specifies the form has not been modified
by the user, & .ng-dirty class, which specifies the form has been made dirty (modified ) by the user, is utilized with
the textarea element in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<style>
body {
text-align: center;
}

h1 {
color: green;
}

textarea.ng-dirty {
color: green;
background-color: lightgreen;
}

textarea.ng-pristine {
}
</style>
</head>

<body ng-app="">
<h3>Textarea Directive</h3>
<p><b>Textarea field:</b></p>
<textarea placeholder="Start typing..."
ng-model="gfg" required>
</textarea>
</body>
</html>
Output:
 AngularJS | input Directive

In this article, we will see how the input Directive in AngularJS can be utilized to change the default behavior
of <input> elements. This can be done with the help of the ng-model attribute present inside the <input> element.
<input> is an HTML tag that is used to get user data using the input.ng-model, which is an angular directive that is
used for data binding(i.e., reference to the input element is provided by the ng-model). These both are combined to
modify the input field.
Syntax:
<input ng-model="name">
The following states are established to the input field whose value is true for the following:
 $untouched: when the field has not been touched
 $touched: when the field has been touched
 $pristine: when the field has not been modified
 $dirty: when the field has been modified
 $invalid: when the field content is not valid
 $valid: when the field content is valid
The value for each state represents the boolean value, i.e. either true or false.
Example 1: This example illustrates the $valid state for the required input field in a form.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title>AngularJS input Directive</title>
</head>

<body ng-app="" style="text-align:center;">
GeeksforGeeks
</h1>
<h3>AngularJS input Directive</h3>
<form name="form1">
<input name="var1" ng-model="var1" required>
</form>
<p>{{var1}}</p>
<p>
The state of $valid is {{form1.var1.$valid}}
</p>
</body>
</html>
Output:

For the above-mentioned input directive, there are few CSS classes are added, which are described below:
 ng-untouched: The field has not been touched yet
 ng-touched: The field has been touched
 ng-pristine: The field has not been modified yet
 ng-dirty: The field has been modified
 ng-valid: The field content is valid
 ng-invalid: The field content is not valid
 ng-valid-key: One key for each validation.
Example: ng-valid-required
 ng-invalid-key: One key for each validation.
Example: ng-invalid-required
The classes are removed if the value is false.
Example 2: If the input field is used along with the required attribute, then the valid (when there is an input it is set
to true) and invalid (when there is no input it is set to true) states are established. The classes are removed if the
value is false.
 HTML
<!DOCTYPE html>
<html>

<head>
<title> AngularJS input Directive</title>
<style>
input.ng-invalid {
}

input.ng-valid {
background-color: yellow;
}
</style>

<script src=
</script>
</head>

GeeksforGeeks
</h1>
<h3>AngularJS input Directive</h3>
<form name="form1">
<input name="var1" ng-model="var1" required>
</form>
<p>{{var1}}</p>
<p>
The state of $valid is
{{form1.var1.$valid}}
</p>
</body>
</html>
Output:
 AngularJS | ng-include Directive

AngularJS has a built-in directive to include the functionality from other AngularJS files by using the ng-include
directive. The primary purpose of the ng-include directive is used to fetch, compile, and include an external HTML
file in the main AngularJS application. These are added as child nodes in the main application. The ng-include
attribute’s value can also be an expression, that returns a filename. It is supported by all HTML elements.
Syntax:
<element ng-include="filename"
onload="expression"
autoscroll="expression" >
Content...
</element>
Note: Here the onload and autoscroll parameter are optional, onload define an expression to evaluate when the
included file is loaded and autoscroll define whether or not the included section should be able to scroll into a
specific view.
Example 1: This example describes the AngularJS ng-include Directive by fetching the data from the child.html file.
External HTML file: Save this file as child.html.
 HTML


<p>Hello Geeks from include component.</p>
index.html:
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS ng-include Directive</title>
<script src=
</script>
</head>

<h3>ng-include Directive</h3>
<div ng-include="'child.html'"></div>
</body>

</html>
Output:
Example 2: This example describes the AngularJS ng-include Directive by fetching the data in the tabular format
from the table.html file.
External HTML file: Save this file as table.html.
 HTML


<table>
<tr ng-repeat="Subject in tutorials">
<td>{{ Subject.Name }}</td>
<td>{{ Subject.Description }}</td>
</tr>
</table>
index.html:
 HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>AngularJS ng-include Directive</title>
<script src=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js ">
</script>
</head>

<body ng-app="main-app">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>

<h3>ng-include Directive</h3>

<div ng-controller="AngularController">
<div ng-include="'table.html'"></div>
</div>
</center>

<script>
var main_app = angular.module('main-app', []);
main_app.controller('AngularController',
function ($scope) {
$scope.tutorials = [{
Name: "AngularJS",
Description: "Front End Framework"
}, {
Name: "NodeJS",
Description: "Server side JavaScript"
}, {
Name: "ExpressJS",
Description: "Server side JS Framework"
}];
});
</script>
</body>

</html>
Output:
 AngularJS | ng-jq Directive

The ng-Jq directive in AngularJS allows forcing the library used by angular.element library. The forcing of jQLite
should happen when we leave ng-jq blank, otherwise set the name of the jquery variable under the window (e.g.,
jQuery). jQLite is directly built into AngularJS and is an important subset of jQuery. By default, AngularJS use
jQLite. This directive is looked upon by the AngularJS when it needs to get loaded, and it does not wait for the
DOMContentLoaded event at all. It should get placed on the element which comes up before going to the script
which is responsible for leading the angular. Aside from the ng-app directive, if you add the ng-jq directive, you can
specify the jQuery name which will be available under the window, which is going to be extremely crucial when you
are going to use jQuery with an alias variable.
Note: Only the first instance of the ng-jq directive is going to be used by the AngularJS, while all the others will get
ignored. Use jQuery to load the jQuery library before loading the AngularJS then angular will skip jQLite and it will
start to use the jQuery library.
Syntax: The ng-jq Directive can be used:
As an element:
<ng-jq [ng-jq="string"]>
Content...
</ng-jq>
As an attribute:
<element [ng-jq="string"]>
Content...
</element>
Parameter value: It contains a single parameter ng-jq which is optional. The name of the library must be specified
under the window to use for the angular.element.
Example: This example describes the use of the ng-jq Directive in AngularJS, by checking the existence of
jQuery.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS ng-jq Directive</title>
<script data-require="[email protected]" data-semver="2.1.3"
src="http://code.jquery.com/jquery-2.1.3.js">
</script>

<script>
var jQuery_2_1_3 = $.noConflict(true);
</script>

<script data-require="[email protected]"
data-semver="1.4.0-rc.0"
src="https://code.angularjs.org/1.4.0-rc.0/angular.js">
</script>

<script>
angular.module('ngAppTest', [])
.controller('MainCtrl', function () {
this.isUsingJQuery =
angular.element.toString()
.indexOf('jQuery') !== -1;
})
</script>
</head>

<body style="text-align:center;" ng-app="ngAppTest"
ng-jq="jQuery_2_1_3" ng-controller="MainCtrl as vm">

<h3 style="color:purple">ng-jq Directive</h3>
<p>is using jQuery : {{ vm.isUsingJQuery }}</p>
</body>

</html>
Output:
 AngularJS | ng-model Directive

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and
textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable
whenever we require that value. It also is used during form validations. The various form input types (text,
checkbox, radio, number, email, URL, date, datetime-local time, month, week) can be used with the ngModel
directive. This directive is supported by <input>, <select> & <textarea>.
Syntax:
<element ng-model="">
Content...
</element>
Example 1: This example describes the basic usage of the ng-model Directive in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS ng-model Directive</title>
<script src=
</script>
<style>
body {
font-family: Arial;
}
h1 {
color: green;
}
.column {
float: left;
text-align: left;
width: 49%;
}
.row {
content: "";
display: table;
}
</style>
</head>

<body ng-app="myApp" ng-controller="myController">
<h1>GeeksforGeeks </h1>
<h3>ng-model Directive</h3>
<h4>Input Box</h4>
<div class="row">
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>
Date:
<input type="date" ng-model="date1"
(change)="log(date1)">
<pre> Todays date:{{ date1 }}</pre> Datetime-local
<input type="datetime-local" ng-model="date2">
<pre> {{ date2 }} </pre> Time
<input type="time" ng-model="time1">
<pre> {{ time1}} </pre> Month
<input type="month" ng-model="mon">
<pre> {{ mon }} </pre> Week
<input type="week" ng-model="we">
<pre> {{ we }} </pre>
</div>
</div>
</body>
<script>
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>
Output:

In order to make URL and email print, we have to write a valid email/URL only then it would get printed. In the case
of printing of date, and time using ngmodel, then we have to fill in all the fields in the input box. The radio button
once selected won’t get deselected since, in the function of “c”, we are setting the value of choice as true.
HTML forms using the ng-model directive: We can define ngModel in the following way by writing the below
code in the app.component.html file.
<div class="form-group">
<label for="phone">mobile</label>
<form>
<input type="text"
id="phone"
ngModel name="phone"
#phone="ngModel"
placeholder="Mobile">
</form>
<pre>{{ phone.value }}</pre>
</div>
The ngModel directive stores a variable by reference, not value. Usually in binding inputs to models that are
objects (e.g. Date) or collections (e.g. arrays). The phone object created has many fields which are used
for validation purposes. The following is the list of classes for validation purposes:
 ng-touched: It shows that field has been touched.
 ng-untouched: It shows that field has not been touched yet.
 ng-valid: It specifies that the field content is valid.
 ng-invalid: It specifies that the field content is not valid.
 ng-dirty: It illustrates that the field has been modified.
 ng-pristine: It represents that the field has not been modified yet.
Binding ngModel with getter and setter: Whenever a function is called with zero arguments then it returns a
representation of the model. And when called with a parameter it sets the value. Since ngModel refers to address
that is why it does not save the changed value in the object itself rather it saves it in some internal state (variable-
name.value). It will be useful if we keep a practice of using getter and setter for models when there is an internal
representation as the getter and setter function gets more often called as compared to the rest of the parts of the
code.
Syntax:
ng-model-options="{ getterSetter: true }"
We can add this to the input element.
Example 2: This example describes the ng-model Directive in AngularJS, where we have bound the ngModel
directive with getter and setter.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS ng-model Directive</title>
<script src=
</script>

<style>
body {

font-family: Arial;
margin-left: 45px;
}

h1 {
color: green;
}
</style>
</head>

<body ng-app="myApp">
<h3>ng-model Directive</h3>
<div ng-controller="myController">
<form>
Name 1:<input type="text" name="Name"
ng-model="user.name"
ng-model-options="{ getterSetter: true }" />
<pre>user.name =
<span ng-bind="user.name()"></span>
</pre>
Name 2:<input type="text" name="Name1"
ng-model="user.name1"
ng-model-options="{ getterSetter: true }" />
<pre>user.name =
<span ng-bind="user.name1()"></span>
</pre>
</form>
</div>
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', function ($scope) {
name = 'GeeksforGeeks';
name1 = "";
$scope.user = {
name: function (Name) {
return arguments.length ? (name = Name) : name;
},
name1: function (Name1) {
return arguments.length ? (name1 = Name1) : name1;
}
};
}]);
</script>
</body>

</html>
Output: Here, we have initialized name 1 by the string GeeksforGeeks and name 2 by an empty string.

 AngularJS | ng-transclude Directive
The ng-transclude directive is used to mark the insertion point for transcluded DOM of the nearest parent that
uses transclusion. Use transclusion slot name as the value of ng-transclude or ng-transclude-slot attribute. If the
transcluded content has more than one DOM node with the whitespace text node, then the text that exists with
content for this element will be discarded before the transcluded content is inserted. In case, if the transcluded
content is empty or contains only a whitespace text node, then the content that exists will remain unchanged. For
this, it facilitates the fallback content when no transcluded content is provided.
Syntax: The ng-transclude Directive can be defined in the following ways:
As element:
<ng-transclude ng-transclude-slot="string">
...
</ng-transclude>
As CSS class:
<element class="ng-transclude: string;"> ... </element>
As attribute:
<element ng-transclude="string">
...
</element>
Parameter value:
 ngTransclude: It specifies the name of the slot that is to be inserted for this point. The default slot will be
utilized if it is not given or has the same value as the attribute’s name or contains empty. It is of string type.
Example 1: This example describes the implementation of the ng-transclude Directive in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
</script>
</head>

<body ng-app="transcludeDemo"
style="text-align: center;">
<script>
angular.module('transcludeDemo', [])
.directive('pane', function () {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
template:
'<div style="border: 3px solid black;">' +
'<div style="background-color: limegreen">' +
'{{title.toUpperCase();}}</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
})
.controller(
'ExampleController', ['$scope', function ($scope) {
$scope.title = 'gfg';
}]);
</script>
<h3>ng-transclude Directive</h3>
<div ng-controller="ExampleController">
<input ng-model="title" aria-label="title">
<br />
<pane title="{{title}}">
<span>{{text}}</span>
</pane>
</div>
</body>
</html>
Output:

Example 2: This example describes the implementation of the ng-transclude Directive in AngularJS, by using the
<textarea> tag.
 HTML
<!DOCTYPE html>
<html>

<head>
<title> simpleTransclude Example </title>
<script src=
"//code.angularjs.org/snapshot/angular.min.js">
</script>
</head>

<body ng-app="transcludeDemo" style="text-align: center;">
<script>
angular.module('transcludeDemo', [])
.directive('pane', function () {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
template:
'<div style="border: 1px solid black;">' +
'<div style="background-color: green">' +
'{{title.toUpperCase();}}</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
})
.controller(
'ExampleController', ['$scope', function ($scope) {
$scope.title = 'gfg';
$scope.text = 'geeksforgeeks';
}]);
</script>
<div ng-controller="ExampleController">
<input ng-model="title" aria-label="title">
<br />
<textarea ng-model="text" aria-label="text"></textarea>
<br />
<pane title="{{title}}">
<span>{{text.toUpperCase();}}</span>
</pane>
</div>
</body>
</html>
Output:

Example 3: This example describes the implementation of the ng-transclude Directive in AngularJS, creating the
custom button.
 HTML
<!DOCTYPE html>
<html lang="en">

<head>
<title>ng-transclude</title>
<script src=
</script>
</head>

<body ng-app="FallbackContentDemo" style="text-align:center">
<script>
angular.module('FallbackContentDemo', [])
.directive('myButton', function () {
return {
restrict: 'E',
transclude: true,
scope: true,
template:
'<button style="cursor: wait;">' +
'<ng-transclude>' +
'<b style="color: green;">Click Me!</b>' +
'</ng-transclude>' +
'</button>'
};
});
</script>


<my-button id="fallback"></my-button>

<br>
<my-button id="modified">
<i style="color: blue;">Click Me!</i>
</my-button>
</body>
</html>
Output:
 AngularJS | ng-class-even Directive

The ng-class-even Directive in AngularJS is used to specify the CSS classes on every even appearance of HTML
elements. It is used to dynamically bind classes on every even HTML element. If the expression inside the ng-
class-even directive returns true then only the class is added else it is not added. The ng-repeat directive is
required for the ng-class-even directive to work. It is supported by all HTML elements.
Syntax:
<element ng-class-even="expression">
Contents...
</element>
Parameter value:
 expression: This parameter returns more than one class name or simply specifies the CSS class
for even appearance of HTML elements.
Example 1: This example uses the ng-class-even Directive to select even elements and apply CSS property.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-class-even Directive</title>
<script src=
</script>
.index {
color: white;
}
</style>
</head>

<body ng-app="app" style="padding:20px">
<h3>ng-class-even Directive</h3>
<table>
<thead>
<th>sorting techniques:</th>
<tr ng-repeat="i in sort">
<td ng-class-even="'index'">
{{i.name}}
</td>
</tr>
</thead>
</table>
</div>
<script>
function($scope) {
$scope.sort = [{
name: "Merge sort"
}, {
name: "Quick sort"
}, {
name: "Insertion sort"
}, {
name: "Bubble sort"
}];
}]);
</script>
</body>
</html>
Output:
Example 2: This example describes the ng-class-even Directive in AngularJS, where even elements are selected,
in order to change its font-size & the text color.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-class-even Directive</title>
<script src=
</script>

.index {
color: green;
font-size: 20px;
}

ul {
list-style-type: none;
}
</style>
</head>

<h3>ng-class-even Directive</h3>
<h4>Sorting Techniques:</h4>
<ul ng-repeat="i in sort">
<li ng-class-even="'index'">{{i.name}}</li>
</ul>
</div>
<script>
function ($scope) {
$scope.sort = [{
name: "Merge sort"
}, {
name: "Quick sort"
}, {
}, {
name: "Bubble sort"
}, {
name: "Selection sort"
}];
}]);
</script>
</body>
</html>
Output:

 AngularJS | ng-class-odd Directive
The ng-class-odd Directive in AngularJS is used to specify the CSS classes on every odd appearance of HTML
elements. It is used to dynamically bind classes on every odd HTML element. If the expression inside the ng-class-
odd directive returns true then only the class is added else it is not added. The ng-repeat directive is required for
the ng-class-odd directive to work. This directive can be utilized for the styling of the items in a list or rows in a
table, although, can be used for remaining HTML elements, as well. It is supported by all HTML elements.
Syntax:
<element ng-class-odd="expression">
Contents...
</element>
Example: This example uses the ng-class-odd Directive to select odd elements and add some CSS style.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-class-odd Directive</title>
<script src=
</script>

.index {
color: white;
}
</style>
</head>

<h2>ng-class-odd Directive</h2>

<table>
<thead>
<th>sorting techniques:</th>
<td ng-class-odd="'index'">
{{i.name}}
</td>
</tr>
</thead>
</table>
</div>

<script>
$scope.sort = [
{ name: "Merge sort" },
{ name: "Quick sort" },
{ name: "Insertion sort" },
{ name: "Bubble sort" }
];
}]);
</script>
</body>

</html>
Output:
Example 2: This example describes the ng-class-odd Directive in AngularJS, where odd elements are selected,
in order to change its font-size & the text color.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-class-odd Directive</title>
<script src=
</script>

.index {
color: green;
font-size: 20px;
}

ul {
}
</style>
</head>

<h3>ng-class-odd Directive</h3>
<h4>Sorting Techniques:</h4>
<ul ng-repeat="i in sort">
<li ng-class-odd="'index'">{{i.name}}</li>
</ul>
</div>
<script>
function ($scope) {
$scope.sort = [{
name: "Merge sort"
}, {
name: "Quick sort"
}, {
}, {
name: "Bubble sort"
}, {
name: "Selection sort"
}];
}]);
</script>
</body>

</html>
Output:

 AngularJS | ng-value Directive
The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to
achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is
not used for that specific element. It is supported by <input> and <select> elements.
Syntax:
<element ng-value="expression">
Content ...
</element>
Parameter value:
 expression: It specifies the value that is bound with the element’s value attribute & value property. It is of
string type.
Example 1: This example describes the basic usage of the ng-value Directive in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<style>
body {
text-align: center;
font-family: 'Times New Roman', Times, serif;
}

h1 {
color: green;
}
</style>
</head>

<body ng-app="gfg" ng-controller="geek">
<h3>ng-value Directive</h3>
<input ng-value="displayVal">

<script>
var app = angular.module('gfg', []);
$scope.displayVal = "GeeksforGeeks";
});
</script>
</body>
</html>
Output:

Example 2: This example describes the ng-value directive in AngularJS, where a value is selected from the list &
correspondingly, rendering that value.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-value Directive</title>
<script src=
</script>
</head>

<h1 style="color:green;">GeeksforGeeks</h1>
<h2>ng-value Directive</h2>
<p>Choose one:</p>
<div ng-repeat="l in sort">
<input type="radio"
ng-model="my.fav"
ng-value="l"
name="Sort"> {{l}}
</div>
<pre>Selected choice is: {{my.fav}}</pre>
</div>
<script>
$scope.sort = [
'Merge Sort',
'Quick Sort',
'Bubble Sort'
];
$scope.my = { fav: 'Merge Sort' };
}]);
</script>
</body>
</html>
Output:
 AngularJS | ng-bind-template Directive

The ng-bind-template Directive in AngularJS is used to replace the content of an HTML element with the value of
the given expression. It is used to bind more than one expression. It can have multiple {{ }} expressions. It is
Syntax: The ng-bind-template Directive can be used:
As an attribute:
<element ng-bind-template="expression">
Contents...
</element>
As an element:
<ng-bind-template ng-bind-template="expression">
Content...
</ng-bind-template>
Parameter value:
 expression: This parameter specifies more than one expression will be evaluated, where each expression
is surrounded with {{}}. It is of string type.
Example 1: This example uses the ng-bind-template Directive to display the binding content.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>
ng-bind-template Directive
</title>

<script src=
</script>
</head>


<h2>ng-bind-template Directive</h2>

Choose one:<br>
<label>Linear Search
<input type="radio"
name="r1"
ng-model="search"
value="Linear Search" />
</label><br>
<label>Binary Search
<input type="radio"
name="r1"
ng-model="search"
value="Binary Search" />
</label><br>
<span ng-bind-template=
"{{msg}} {{search}}"></span>
<br>
</div>

<script>
function ($scope) {
$scope.msg =
"The better searching algorithm is: ";
$scope.search = ""
}]);
</script>
</body>
</html>
Output:

Example 2: This example uses the ng-bind-template Directive to display the binding content.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-bind-template Directive</title>

<script src=
</script>
</head>


<h3>ng-bind-template Directive</h3>
<label>Football
<input min="0"
type="number"
ng-model="Football" />
</label><br><br>
Count of Footballs:
<span ng-bind-template="{{Football}}"></span><br>
</div>

<script>
function ($scope) {
$scope.Football = "";
}]);
</script>
</body>
</html>
Output:

 AngularJS | ng-form Directive
The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies
an inherit control from the HTML form. It creates a control group inside a form directive which can be used to
determine the validity of a sub-group of controls.
Syntax:
<ng-form [name="string"]>
Contents...
</ng-form>
Example 1: This example uses the ng-form Directive to hide the input text fields and display their content.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-form Directive</title>
<script src=
</script>
</head>

<h3 >ng-form Directive</h3>

<div>
<ng-form ng-hide="isDetail">
Full Name:
<input type="text" ng-model="fName">
<br><br>
Username:
<input type="text" ng-model="uName">
<br>
</ng-form>
<br>
ng-click="isDetail=true"
value="Click it!" />
<div ng-show="isDetail">
First Name:<b>{{fName}}</b><br />
User Name:<b>{{uName}}</b><br />
</div>
</div>
</body>
</html>
Output:

Example 2: This example uses the ng-form Directive to validate the email and save it.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-form Directive</title>
<script src=
</script>
</head>

<h3>ng-form Directive</h3>
<div>
<ng-form ng-submit="save(user)"
name="myForm" novalidate>
Enter Email:
<input type="email" name="uname" required
ng-model="user.userName"><br>
<span style="color:red"
ng-show=
"myForm.uname.$error.required && myForm.uname.$dirty">
Email is required
</span>
<br>
<button ng-disabled="!myForm.$valid" type="submit">
save
</button>
</ng-form>
</div>
</body>
</html>
Output:
 AngularJS | ng-bind-html Directive

The ng-bind-html Directive in AngularJS is used to bind the innerHTML of an HTML element to application data
and remove dangerous code from the HTML string. $sanitize service is a must for the ng-bind-html directive. It is
Syntax:
<element ng-bind-html="expression">
Contents...
</element>
Parameter Value:
 expression: It specifies the variable or the expression that is to be evaluated.
Example 1: This example illustrates the ng-bind-html Directive in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-bind-html Directive</title>
<script src=
</script>
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js">
</script>

<style>
.green {
color: green;
font-size: 20px;
}
</style>
</head>

<body ng-app="myApp"
ng-controller="geek"

<h3>ng-bind-html Directive</h3>
<p ng-bind-html="text"></p>

<script>
var myApp = angular.module("myApp", ['ngSanitize']);
myApp.controller("geek", ["$scope", function ($scope) {
$scope.text =
"<span class='green'> GeeksforGeeks</span> is the"
+ " computer science portal for geeks.";
}]);
</script>
</body>
</html>
Output:
Example 2: This is another example that illustrates the implementation of the ng-bind-html Directive in AngularJS.
 HTML
<!DOCTYPE html>
<html ng-app="myApp">

<head>
<title>ng-bind-html Directive</title>

<script src=
</script>
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js">
</script>

<style>
.green {
border: 2px dashed red;
border-radius: 50px;
color: green;
font-weight: bold;
font-size: 25px;
font-family: 'Arial';
}
</style>
</head>

<body ng-controller="geek" style="text-align: center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>ng-bind-html Directive</h3>
<p ng-bind-html="text"></p>

<script>
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('geek', [
'$scope',
function ($scope) {
$scope.text =
"<p class ='green'> GeeksforGeeks Learning Together</p>";
},
]);
</script>
</body>
</html>
Output:

 AngularJS | ng-class Directive
The ng-class Directive in AngularJS is used to specify the CSS classes on HTML elements. It is used to
dynamically bind classes on an HTML element. The value for the ng-class has either string, an object, or an array.
It must contain more than one class name, which is separated by space, in the case of a string. If it is an object, it
will contain the key-value pairs, where the key represents the class name for the class that wants to add & value
represent the boolean value. If the expression inside the ng-class directive returns true then only the class is added
else it is not added. If the value of ng-class is an array then it can be the combination of both strings as well as an
array. It is supported by all HTML elements.
Syntax:
<element ng-class="expression">
Contents...
</element>
Example 1: This example uses the ng-class Directive to set and reset the CSS class.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-class Directive</title>
<script src=
</script>
<style>
.edit {
color: green;
font-size: 1.5em;
}
</style>
</head>

GeeksforGeeks
</h1>

<h3>ng-class Directive</h3>

<div>
ng-click="edit=true"
value="Style" />
ng-click="edit=false"
value="Reset" />
<br><br>
<span ng-class="{true:'edit'}[edit]">
GeeksforGeeks
</span> is the computer science portal for geeks.
</div>
</body>
</html>
Output:

Example 2: This example uses the ng-class Directive to set the CSS style to the class.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-class Directive</title>
<script src=
</script>
.index {
color: white;
}
</style>
</head>

GeeksforGeeks
</h1>

<h3>ng-class Directive</h3>

<table>
<thead>
<th>Select any sorting technique:</th>
<td ng-class="{index:$index==row}"
ng-click="sel($index)">
{{i.name}}
</td>
</tr>
</thead>
</table>
</div>

<script>
$scope.sort = [{
name: "Merge sort"
}, {
name: "Quick sort"
}, {
name: "Bubble sort"
}];
$scope.sel = function(index) {
$scope.row = index;
};
}]);
</script>
</body>
</html>
Output:
 AngularJS | ng-pluralize Directive

The ng-pluralize Directive in AngularJS is used to specify the message to display according to the en-us
localization rules. The en-us localization rules are bundled with AngularJS. The default plural category in AngularJS
is “one” and “other”.
Syntax: The ng-pluralize Directive can be used:

As element:
<ng-pluralize count="" when="string" [offset="number"]>
Contents...
</ng-pluralize>
As attribute:
<element ng-pluralize count="" when="string"
[offset="number"]>
Contents...
</element>
Parameter Values:
 count: It refers to the value of the count attribute which is used by Angular expression.
 when: It is used to specify the mapping between the actual string and the plural categories. The attribute
value must be in JSON object style.
 offset: It specifies the offset attribute to deduct from the total number.
Example 1: This example uses the ng-pluralize Directive to display content.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-pluralize Directive</title>
<script src=
</script>
</head>

<h2>ng-pluralize Directive</h2>
<div ng-init="Hotel=[0, 1, 2, 3]"> Choose from list:
<select ng-model="booking"
ng-options="booking as booking for booking in Hotel">
</select><br><br>
<ng-pluralize count="booking" when="{
'0':'No booking available',
'1':'{{booking}} booking available',
'2':'{{booking}} bookings available',
'3':'{{booking}} bookings available',
}"> </ng-pluralize>
</div>
</div>
<script>
$scope.booking = 0;
}]);
</script>
</body>
</html>
Output:

Example 2: This example uses the ng-pluralize Directive to display the input text content.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-pluralize Directive</title>
<script src=
</script>
</head>

<h2 style="">ng-pluralize Directive</h2>
<p>Input Names separated by comma(, ):</p>
<textarea class="form-control"
ng-model="people"
ng-list=", ">
</textarea><br><br>
<ng-pluralize count="people.length" offset="2" when="{
'0': 'You got no viewers.',
'1': '{{people[0]}} is viewing.',
'2': '{{people[0]}} and {{people[1]}} are viewing.',
'one': '{{people[0]}}, {{people[1]}} and one other
person is viewing.',
'other': '{{people[0]}}, {{people[1]}} and {}
other people are viewing.'}">
</ng-pluralize>
</div>

<script>
$scope.people = [];
}]);
</script>
</body>
</html>
Output:
 AngularJS | ng-pattern Directive
The ng-pattern Directive in AngularJS is used to add up pattern (regex pattern) validator to ngModel on input
HTML element. It is used to set the pattern validation error key if input field data does not match a RegExp that is
found by evaluating the Angular expression specified in the ngpattern attribute value.
Syntax:
<element ng-pattern="expression"> Contents... </element>
Example 1: This example uses ng-pattern Directive to check the password pattern.
<!DOCTYPE html>
<html>

<head>
<title>ng-pattern Directive</title>

<script src=
</script>

<style>
.red {
color:red
}
.green {
color:green
}
</style>
</head>


<h2 style="">ng-pattern Directive</h2>

<ng-form name="pass">
Password:<input type="password" ng-model="password"
name="password" ng-pattern="re" /><br>

<span ng-show="pass.password.$error.pattern"
style="color:red">
Not valid password.
</span><br>

Confirm: <input type="password" ng-model="repass"
ng-keyup="compare(repass)" name="repass"
ng-pattern="re" /><br>

<span ng-show="isconfirm || pass.repass.$dirty "
ng-class="{true:'green',false:'red'}[isconfirm]">
Password {{isconfirm==true?'':'not'}} match
</span>
</ng-form>
</div>

<script>
$scope.re = /^[a-zA-Z]\w{3,14}$/;

$scope.compare = function (repass) {
$scope.isconfirm = $scope.password == repass ?
true : false;
}
}]);
</script>
</body>

</html>
Output:
 Invalid Input:
 Input doesn’t Match:

 Valid Input:
Example 2: This example shows error if the input is anything other than number.
<!DOCTYPE html>
<html>

<head>
<title>ng-pattern Directive</title>

<script src=
</script>
</head>


<h2 style="">ng-pattern Directive</h2>

<ng-form name="num">
Input Number: <input type="text" ng-model="number"
name="number" ng-pattern="re" /><br />

<span ng-show="num.number.$error.pattern" style="color:red">
Input is not valid.
</span>
</ng-form>
</div>

<script>

$scope.re = /^[0-9]{1,6}$/;
}]);
</script>
</body>

</html>
Output:
 Input is text:
 Input is number:
 AngularJS | ng-style Directive

The ng-style Directive in AngularJS is used to apply custom CSS styles on an HTML element. The expression
inside the ng-style directive must be an object. It is supported by all the HTML elements.
Syntax:
<element ng-style="expression">
Content ...
</element>
Parameter:
 expression: It represents the return type of the expression will be an object, in the form of key: value pair,
where the key denotes the CSS properties & the value denotes the respective value assigned to it.
Example: This example illustrates the basic implementation of the AngularJS ng-style Directive.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title>AngularJS ng-style Directive</title>
</head>

<body ng-app="app" ng-controller="gfgCtrl">
<h1 ng-style="gfgData">GeeksforGeeks</h1>
<script>
app.controller("gfgCtrl", function($scope) {
$scope.gfgData = {
"color": "white",
"background-color": "green",
"font-family": "sans-serif",
"text-align": "center"
}
});
</script>
</body>
</html>
Output:

Example: This example illustrates the implementation of the ng-style Directive by changing the styles for the given
input.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-style Directive</title>
<script src=
</script>
.bg-color {
background-color: pink;
padding: 10px;
font-size: 18px;
}
</style>
</head>

<h2>ng-style Directive</h2>
<div ng-controller="controllerName">
Input:
<input type="text"
ng-model="color"
placeholder="Enter any color." />
<p ng-repeat="i in sort"
ng-style="{color:color}">
<span class="bg-color">
Name: {{i.name}}
</span>
</p>

</div>
<script>
app.controller('controllerName',
['$scope', function($scope) {
$scope.sort = [{
name: 'Merge sort'
}, {
name: 'Quick sort'
}, {
name: 'Radix sort'
}];
}]);
</script>
</body>
</html>
Output:
 AngularJS | ng-switch Directive
The ng-switch Directive in AngularJS is used to specify the condition to show/hide the child elements in HTML
DOM. The HTML element will be displayed only if the expression inside the ng-switch directive returns true
otherwise it will be hidden. It is supported by all HTML elements.
Syntax:
<element ng-switch="expression">
<element ng-switch-when="value"> Contents... </element>
<element ng-switch-when="value"> Contents... </element>
<element ng-switch-default> Contents... </element>
</element>
Parameter:
 expression: It specifies the element has matched and will be displayed otherwise will be discarded.
Example 1: This example uses the ng-switch Directive to switch the element.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-switch Directive</title>
<script src=
</script>
</head>

<body ng-app="">
<h2>ng-switch Directive</h2>
<div>
<form>
<label>
<input type="radio"
value="search"
ng-model="switch.Data">
Searching Algorithms
</label>
<label>
<input type="radio"
value="sort"
ng-model="switch.Data">
Sorting Algorithms
</label>
</form>

<div ng-switch="switch.Data" id="wrapper">
<div ng-switch-when="search">
<h2> Searching Algorithms</h2>
<ul>
<li>Binary Search
<li>Linear Search
</ul>
</div>
<div ng-switch-when="sort">
<h2>Sorting Algorithms</h2>
<ul>
<li>Merge Sort
<li>Quick Sort
</ul>
</div>
</div>
</div>
</body>
</html>
Output:

Example 2: This example uses the ng-switch Directive to display the entered number.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-switch Directive</title>
<script src=
</script>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css ">
</head>

<h2>ng-switch Directive</h2>
<div>
<div class="col-md-3">
Type Number(1-2):
<input ng-model="number" type="number" />
</div><br>
<div ng-switch="number" class="col-md-3">
<div ng-switch-when="1" class="btn btn-danger">
You entered {{number}}
</div>
<div ng-switch-when="2" class="btn btn-primary">
You entered {{number}}
</div>
<div ng-switch-default class="well">
This is the default section.
</div>
</div>
</div>
</body>
</html>
Output:

 AngularJS | ng-show Directive
The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression
in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is
Syntax:
<element ng-show="expression">
Contents...
</element>
Parameter Value:
 expression: It specifies the element will be displayed only if the required expression returns true.
Example 1: This example uses the ng-show Directive to display the HTML element after checking the checkbox.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body>
<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>
myapp.controller("geek", function($scope) {
$scope.show = false;
});
</script>
</body>
</html>
Output:

Example 2: This example uses the ng-show Directive to display entered number a is a multiple of 5 or not.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<div ng-controller="geek" ng-init="val=0">
GeeksforGeeks
</h1>
Enter a number:
<input type="text" ng-model="val"
ng-keyup="check(val)">
<div ng-hide="show">
<h3>
The number is multiple of 5
</h3>
</div>
<div ng-show="show">
<h3>
The number is not a multiple of 5
</h3>
</div>
</div>
<script>
$scope.check = function(val) {
$scope.show = val % 5 == 0 ? false : true;
};
}]);
</script>
</body>
</html>
Output:
 AngularJS | ng-srcset Directive

The ng-srcset Directive in AngularJS is used to specify the srcset attribute of an <img> element, ie, overriding the
original srcset attribute of an <img> element. It helps to ensure that the wrong image is not produced until
AngularJS has been evaluated. This directive must be used instead of using the srcset, especially when the
required AngularJS code is inside of the srcset value. It is supported by <img> and <source> element.
Syntax:
<img ng-srcset="url">
Parameter value:
 url: It represents the expression or a string value, whose final output will be a string.
Example 1: This example describes the implementation of the ng-srcset Directive in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-srcset Directive</title>
<script src=
</script>
</head>

GeeksforGeeks
</h1>

<h2>ng-srcset Directive</h2>

<img ng-srcset="{{pic}}" /><br><br><br>
</div>

<script>
$scope.pic =
"https://media.geeksforgeeks.org/wp-content/uploads/20190328034223/
ngimg1.png";
}]);
</script>
</body>

</html>
Output:
Example 2: This is another example that illustrates the use of the AngularJS ng-srcset Directive.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS ng-srcset Directive</title>
<script src=
</script>

<style>
body {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
}

h1 {
color: green;
}
</style>
</head>

<body ng-app="">
<div ng-init="displayImg = 'img/gfg.jpg'">
<h3>ng-srcset Directive</h3>
<img ng-srcset="{{displayImg}}" alt="GFG_img">
</div>
</body>

</html>
Output:

 AngularJS | ng-src Directive
The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the
original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src
element. It ensures that the wrong image is not produced until AngularJS has been evaluated. It is supported by
<img> element.

Syntax:
<img ng-src="url">
Parameter value:
 url: This parameter specifies that the URL can be a string or any expression that is resulting in a string.
Example: This example describes the usage of the ng-src Directive in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS ng-src Directive</title>
<script src=
</script>
<style>
body {
text-align: center;
}

h1 {
color: green;
}
</style>
</head>

<body ng-app="app">
<h2>ng-src Directive</h2>
<img ng-src="{{pic}}" />
</div><br>
<script>
$scope.pic =
"https://media.geeksforgeeks.org/wp-content/uploads/20190328034223/
ngimg1.png";
}]);
</script>
</body>
</html>
Output:

Example 2: This is another example that describes the usage of the ng-src Directive in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS ng-src Directive</title>
<script src=
</script>
<style>
body {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
}

h1 {
color: green;
}
</style>
</head>

<body ng-app="">
<div ng-init="displayImg = 'img/gfg.png'">
<h3>ng-src Directive</h3>
<img ng-src="{{displayImg}}" alt="GFG_img">
</div>
</body>
</html>
Output:

 AngularJS | ng-submit Directive
The ng-submit Directive in AngularJS is used to specify the functions to be run on submit events. It can be used to
prevent the form from submission if it does not contain an action. It is supported by <form> element.
Syntax:
<form ng-submit="expression">
Content ...
</form>
Parameter:
 expression: When submitting the form, then the function will be invoked to evaluate an expression that will
return the function call.
Example 1: This example describes the basic use of the ng-submit Directive in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-submit Directive</title>
<script src=
</script>
</head>

<h2>ng-submit Directive</h2>

<form name="form1" ng-submit="save(this)" novalidate>
<label for="name">Enter Email: </label>
<input type="email"
name="email"
data-ng-model="email" required />
<br>
<span>{{errorMsg}}</span>
<br>
<input type="submit" value="Click it!">
</form>
</div>

<script>
$scope.save = function ($this) {
if ($this.form1.email.$error.required) {
$scope.errorMsg = "This field is required";
}
else if ($this.form1.$invalid) {
$scope.errorMsg = "Email is not valid";
}
else {
$scope.errorMsg = "";
alert("The given Email is accepted.");
}
}
}]);
</script>
</body>
</html>
Output:

Example 2: This example describes the ng-submit Directive in AngularJS, where the greeting message will be
displayed once the user is logged in.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-submit Directive</title>
<script src=
</script>
</head>

<h2>ng-submit Directive</h2>
<form name="form" ng-submit="login()" ng-hide="isShow">
User Name:
<input type="text" ng-model="users.user" required />
<br /><br />
<button ng-disabled="form.$invalid">
Click to Login
</button>
</form>
<br>
<pre ng-show="isShow">Welcome <b>{{name}}</b>
You are successfully login
</pre>
<input ng-show="isShow"
type="button"
value="Logout"
ng-click="isShow=false" />
</div>

<script>
$scope.users = {
user: ""
};
$scope.login = function () {
$scope.isShow = true;
$scope.name = $scope.users.user;
$scope.users = {
user: ""
}
};
}]);
</script>
</body>
</html>
Output:

 AngularJS | ng-app Directive
The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive
automatically initializes the AngularJS application on page load. It can be used to load various modules in
AngularJS applications. The ng-app directive declares only once in the HTML document. In case if it is declared
more than once then the first ng-app directive appears will be used.
Syntax:
<element ng-app="dataModule">
Contents...
</element>
Parameter value:
 dataModule: It specifies the name of the module that is to be loaded in the application. It is an optional
parameter.
Example 1: This example implements the ng-app Directive to define a default AngularJS application.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS ng-app Directive</title>
<script src=
</script>
</head>

<h3>ng-app directive</h3>
</div>
</body>
</html>
Output:

Example 2: This example implements the ng-app Directive to define a default AngularJS application.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>
AngularJS ng-app Directive
</title>
<script src=
</script>
</head>

GeeksforGeeks
</h1>
<h2>ng-app Directive</h2>
<div>
<p>Name:
<input type="text" ng-model="name">
</p>
<p>You entered:
<span ng-bind="name"></span>
</p>
</div>
</body>
</html>
Output:

 AngularJS | ng-href Directive
The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used
then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value
then it may go to the wrong URL and the link will be broken and will most likely return a 404 error while ng-href
directive checks that the link is not broken even if the link is clicked before the code evaluation by AngularJS.
Syntax:
<element ng-href="addr">
Content ...
</element>
Parameter value:
 addr: It refers to the string containing the angular expression.
Example 1: This example describes the use of the ng-href Directive in AngularJS, where the ng-init directive is
used to initialize AngularJS Application data, & contains the URL.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>
AngularJS ng-href Directive
</title>
<script src=
</script>
<style>
body {
text-align: center;
}
</style>
</head>

<div ng-init="url = 'https://www.geeksforgeeks.org/ '">
<h2>ng-href Directive</h2>
<p>Go to
<a ng-href="{{url}}">GeeksforGeeks</a>
</p>
</div>
</body>
</html>
Output:

Example 2: This is another example that describes the ng-href Directive in AngularJS.
 HTML
<!DOCTYPE html>
<html ng-app="">

<head>
<title>
AngularJS ng-href Directive
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js ">
</script>
<style>
body {
text-align: center;
}

h1 {
color: green;
}
</style>
</head>

<body ng-controller="gfg">
<h3>ng-href Directive</h3>
<a ng-href="{{ webpage }}">
GeeksforGeeks
</a>

<script>
function gfg($scope) {
$scope.webpage =
"https://www.geeksforgeeks.org/ ";
}
</script>
</body>
</html>
Output:

 AngularJS | ng-required Directive
The ng-required Directive in AngularJS is used to specify the required attribute of an HTML element. The input
field in the form is required only if the expression inside the ng-required directive returns true. It is supported
by <input>, <select> and <textarea> tags.
Syntax:
<element ng-required="expression">
Contents...
</element>
Example 1: This example uses the ng-required Directive to set the input text field of the form tag to required.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-required Directive</title>
<script src=
</script>

<style>
.req {
font-size: 90%;
font-style: italic;
color: red;
}
</style>
</head>

GeeksforGeeks
</h1>

<h3>ng-required Directive</h3>

<div ng-app="app" ng-controller="myCtrl">
<form name="myForm">
<p>Enter Your Name: <br />
<span>
<input type="text"
name="gfg"
ng-model="Name"
ng-required="true" />
</span>
</p>
<span ng-show="myForm.gfg.$invalid" class="req">
This is the required field.
</span>
</form>
</div>

<script>
app.controller("myCtrl", function ($scope) {
$scope.Name = "";
});
</script>
</body>
</html>
Output:

Example 2: This example uses the ng-required Directive to create the required field after checking the checkbox.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-required Directive</title>

<script src=
</script>
</head>

GeeksforGeeks
</h1>

<h2>ng-required Directive</h2>

<div ng-controller="geek" style="font-family:arial;">
<form name="myform">
<label for="requiredValue">
Is Required:
</label>
ng-model="requiredValue"
id="required" />
<br><br>
<label for="input">Enter Name: </label>
<input type="text"
ng-model="model"
id="input"
name="input"
ng-required="requiredValue" />
<br>
<p style="color:red;"
ng-show='myform.input.$error.required'>
Name is required
</p>
</form>
</div>

<script>
var app = angular.module('app', [])
$scope.requiredValue = true;
}]);
</script>
</body>
</html>
Output:
 AngularJS | ng-init Directive
The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS
application and assigns values to the variables. The ng-init directive defines initial values and variables for an
AngularJS application.
Syntax:
<element ng-init = "expression">
...
</element>
Example: This example describes the ng-init Directive by initializing an array of strings.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>
AngularJS ng-init Directive
</title>

<script src=
</script>
</head>

<body>
GeeksforGeeks
</h1>


<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>
Output:

Example 2: The example describes the ng-init Directive by specifying the object with its properties & associated
value of it.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>
AngularJS ng-init Directive
</title>

<script src=
</script>
</head>

GeeksforGeeks
</h1>


<div ng-app="" ng-init=
"objects={
Company:'GeeksforGeeks',
Course:'Data Structures & Algorithms'
}">
<p>
Learn {{ objects.Course }}
from {{ objects.Company }}
</p>
</div>
</body>

</html>
Output:
 AngularJS | ng-paste Directive
The ng-paste Directive in AngularJS is used to specify custom behavior functions when the text in input fields is
pasted into an HTML element. It can be used to call a function that will be triggered when the text is pasted into the
input field. It is supported by <input>, <select> and <textarea>.
Syntax:
<element ng-paste="expression">
Content ...
</element>
Parameter:
 expression: It specifies what to do when the input is pasted into an HTML element.
Example 1: This example describes the ng-paste directive in AngularJS, by specifying the boolean value that
displays whether the text is pasted or not.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-paste Directive</title>
<script src=
</script>
<style>
body {
text-align: center;
}

h1 {
color: green;
}
</style>
</head>

<body ng-app>
<h2>ng-paste Directive</h2>
<div ng-init="ispaste=false;paste='Paste some text!'">
<textarea ng-paste="ispaste=true"
ng-model="paste">
</textarea><br />
<pre>Paste status: {{ispaste}}</pre>
</div>
</body>
</html>
Output:

Example 2: This example describes the ng-paste directive in AngularJS, where it specifies the number of times
the text is pasted, its total count will be displayed accordingly.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-paste Directive</title>
<script src=
</script>
<style>
body {
text-align: center;
}

h1 {
color: green;
}
</style>
</head>

<body ng-app="">
<h2>ng-paste Directive</h2>
<p>paste the "GeeksforGeeks" text</p>
<input ng-paste="paste = paste + 1"
ng-init="paste=0"
<p> {{paste}} times text pasted.</p>
</body>
</html>
Output:
 AngularJS | ng-open Directive
The ng-open Directive in AngularJS is used to specify the open attribute of the specified HTML element. If the
expression inside the ng-open directive returns true then the details will be shown otherwise they will be hidden.
Syntax:
<element ng-open="expression">
Contents...
<element>
Parameter:
 expression: If the expression returns true then it will be used to set the open attribute for the element.
Example: This example uses the ng-open Directive to open the attribute of an element.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-open Directive</title>
<script src=
</script>
</head>

<h2>ng-open Directive</h2>
<details id="details" ng-open="open">
<summary>
Click to view sorting algorithms:
</summary>
<summary>Merge sort</summary>
<summary>Quick sort</summary>
<summary>Bubble sort</summary>
</details>
</body>
</html>
Output:

Example: This example describes the ng-open directive in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-open Directive</title>
<script src=
</script>
<style>
.middle {
text-align: center;
list-style-position: inside;
}

body {
text-align: center;
}

h1 {
color: green;
}
</style>
</head>

<body ng-app="">
<h3>ng-open Directive</h3> List of Data Structures
<input type="checkbox" ng-model="open" />
<br />
<details id="details" ng-open="open">
<summary>View</summary>
<ol class="middle">
<li>Linked List</li>
<li>Stack</li>
<li>Queue</li>
<li>Tree</li>
<li>Graph</li>
</ol>
</details>
</body>
</html>
Output:
 AngularJS | ng-options Directive
The ng-options Directive in AngularJS is used to build and bind HTML elements with options to a model property.
It is used to specify <options> in a <select> list. It is designed specifically to populate the items on a dropdown list.
This directive implements an array, in order to fill the dropdown list. It is supported by the <select> element.
Syntax:
<element ng-options="expression">
Content ...
</element>
Parameter value:
 expression: It selects the particular portion of an array to fill the selected element.
Example 1: This example implements the ng-options Directive to display the option element in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-options Directive</title>
<script src=
</script>
</head>

<body ng-app="app" style="text-align: center">
GeeksforGeeks
</h1>

<h3>ng-options Directive</h3>

<div ng-controller="geek"
ng-init="StudentId=1"> Sorting Algorithms:
<select ng-model="Sorting" ng-options="sort.name as
sort.name for sort in sorting"></select>
<br><br><br> Selected sorting algorithm:
<input type="text" ng-model="Sorting" />
</div>

<script>
$scope.sorting = [{
name: 'Merge sort',
id: 1
}, {
name: 'Quick sort',
id: 2
}, {
name: 'Bubble sort',
id: 3
}];
}]);
</script>
</body>
</html>
Output:

Example 2: This example implements the ng-options Directive to hide or display the element in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-options Directive</title>
<script src=
</script>
</head>

<body ng-app="app"
style="text-align: center">
<h3>ng-options Directive</h3>
<div ng-controller="geek" ng-init="Id=1"> Choose:
<select ng-model="hide" ng-options="show.hide
as show.name for show in HideShow">
</select>
<br><br>
<span ng-hide="hide">
Check to hide
ng-model="hide" />
</span>
</div>
<script>
$scope.HideShow = [{
name: 'Hide',
hide: true,
}, {
name: 'Show',
hide: false
}];
}]);
</script>
</body>
</html>
Output:

 AngularJS | ng-selected Directive
The ng-selected Directive in AngularJS is used to specify the selected attribute of an HTML element. It can be
used to select the default value specified on an HTML element. If the expression inside the ng-selected directive
returns true then the selected option value will be displayed otherwise not displayed.
Syntax:
<element ng-selected="expression">
Contents...
</element>
Parameter value:
 expression: It is used for setting the element’s selected attribute if it returns true.
Example: This example uses the ng-selected Directive to display the selected element.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-selected Directive</title>
<script src=
</script>
</head>

<h3>ng-selected Directive</h3>

<p>Check to select default value:</p>

<input type="checkbox" ng-model="sort">
<br><br>
<select name="geek" >
<option value="1" >Merge sort</option>
<option value="2" ng-selected="sort">
Quick sort
</option>
<option value="3">Bubble sort</option>
<option value="4">Insertion sort</option>
</select>
</body>
</html>
Output:

Example 2: This example describes the use of the ng-selected Directive in AngularJS by disabling the checkbox
& ng-selected option.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-selected Directive</title>
<script src=
</script>
</head>

<h3>ng-selected Directive</h3>
Check to select default value:
<input type="checkbox" disabled
ng-model="sort">
<br><br>
<select name="geek" >
<option value="1" >Merge sort</option>
<option value="2"
ng-selected="sort" disabled>
Quick sort
</option>
<option value="3">Bubble sort</option>
<option value="4">Insertion sort</option>
</select>
</body>
</html>
Output:
 AngularJS | ng-non-bindable Directive
The ng-non-bindable Directive in AngularJS is used to specify that the specific content of HTML should not be
compiled i.e the contents should be ignored by AngularJS. It can be used when we want to display code snippets
instead of compiled output.
Syntax:
<element ng-non-bindable>
Contents...
</element>
Example 1: This example uses ng-non-bindable Directive to ignore expression.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-non-bindable Directive</title>
<script src=
</script>
</head>

<h3>ng-non-bindable Directive</h3>
<div>
The result of
<span ng-non-bindable
style="background-color:green;
color:white">
{{5+5}}
</span> is {{5+5}}
</div>
</body>
</html>
Output:

Example 2: This example uses ng-non-bindable Directive to ignore expression.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>ng-non-bindable Directive</title>
<script src=
</script>
</head>

<h3>ng-non-bindable Directive</h3>
Input 1:
<input type="number" ng-model="val1" />
<br><br>
Input 2:
<input type="number" ng-model="val2" />
<br><br>
<input type="button" value="sum" ng-click="sum()" />
<br><br>
<div>Without Non-Bindable: {{result}}</div>
<div ng-non-bindable>With Non-Bindable: {{result}}</div>
</div>

<script>
$scope.sum = function () {
$scope.result = $scope.val1 + $scope.val2;
}
}]);
</script>
</body>
</html>
Output:
 AngularJS Function Complete Reference
Functions in AngularJS are used to perform some frequent tasks or clarify something. For example AngularJS
angular.isArray() function is used to verify that the assigned object is an array or not.
The Complete List of AngularJS Function are listed below:
 AngularJS angular.bind() Function
The angular.bind() Function in AngularJS is used to bind the current context to a function, but actually, execute it
at a later time. It can also be used in Partial Applications. Partial Application is when you want to make a function
but some of the arguments have been passed already.
Syntax:
angular.bind(self, function, args);
Parameter Values:
 self: This refers to the context in which the function should be evaluated.
 function: It refers to the function to be bound.
 args: It is used to prebound to the function at the time of the function call. It is an optional argument.
Example 1: This example describes the implementation of the angular.bind() Function in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.bind()</title>
<script src=
</script>
</head>

<body ng-app="app" style="text-align:Center">
<h3>angular.bind()</h3>
<p>Input number to sum with 5:
<input type="number" ng-model="num" ng-change="Func()" />
<br>Sum = {{Add}}
</div>

<script>
$scope.num = 0;
$scope.Func = function () {
var add = angular.bind(this, function (a, b) {
return a + b;
});
$scope.Add = add(5, $scope.num);
}
}]);

</script>
</body>
</html>
Output:

Example 2: This is another example that describes the implementation of the angular.bind() Function in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.bind()</title>
<script src=
</script>
</head>

<h3>angular.bind()</h3>
Input A:
ng-model="val1"
ng-change="GetResult()" />
<br><br>
Input B:
ng-model="val2"
ng-change="GetResult()" />
<br /><br>
{{result}}
</div>

<script>
function isEqual(a, b) {
if (a == b) {
return "Inputs are equal."
}
else if (a >= b) {
return "A is greater than B."
}
else if (a <= b) {
return "A is lesser than B."
}
}
$scope.GetResult = function () {
var result = angular.bind(this, isEqual);
$scope.result = result($scope.val1, $scope.val2);
}
}]);
</script>
</body>
</html>
Output:

 AngularJS angular.bootstrap() Function
The angular.bootstrap() Function in AngularJS is a functional component in the Core ng module which is used to
start up an Angular application manually, it provides more control over the initialization of the application.
Syntax:
angular.bootstrap(element, [modules], [config]);
Parameter Values:
 element: An element is a DOM element (e.g. document) that is the root of the Angular application.
 Modules: (Optional)Modules are an array of modules to be loaded.
 Config: (Optional)Config is an object used for configuration options.
Example 1: This example describes the usage of the angular.bootstrap() Function in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.bootstrap() Function</title>
<script src=
</script>
<style>
.id {
font-size: 1.5em;
color: green;
}
</style>
</head>

<h2>angular.bootstrap()</h2>
<span class="id">{{name}}</span>
is the computer science portal for geeks.
</div>
<script>
function ($scope) {
$scope.name = "GeeksforGeeks";
}]);
angular.bootstrap(document, ['app']);
</script>
</body>

</html>
Output:
Example 2: This example describes the usage of the angular.bootstrap() Function in AngularJS by specifying the
radio button.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.bootstrap() Function</title>
<script src=
</script>
</head>

GeeksforGeeks
</h1>

<h2>angular.bootstrap()</h2>

<div class="col-md-3 well"
ng-init="count=0"> Male:
<input type="radio" ng-model="gender"
value="Male"
ng-change="layout(gender)" /> Female:
<input type="radio" ng-model="gender"
value="Female" ng-change="layout(gender)" />
<pre>
<b>You selected:</b> {{result}}
</pre>
</div>
</div>

<script>
function ($scope) {
$scope.layout = function (gender) {
$scope.result = gender;
}
}]);
angular.bootstrap(document, ['app']);
</script>
</body>

</html>
Output:
 AngularJS angular.element() Function

The angular.element() Function in AngularJS is used to initialize DOM element or HTML string as an jQuery
element. If jQuery is available angular.element can be either used as an alias for the jQuery function or it can be
used as a function to wrap the element or string in Angular’s jqlite.
Syntax:
angular.element(element)
Parameter value:
 element: It refers to the HTML DOM element or the string to be wrapped into jQuery.
Example 1: This example illustrates the angular.element() Function in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title>angular.element()</title>
</head>

<body ng-app="app">
GeeksforGeeks
</h1>
<h3>angular.element()</h3>
<div ng-mouseenter="style()" id="ide" ng-mouseleave="remove()">
{{name}}
</div>
</div>
<script>
app.controller('geek', ['$scope', '$document',
function ($scope, $document) {
$scope.name = "GeeksforGeeks";

$scope.style = function () {
angular.element(
$document[0].querySelector('#ide')).css({
'color': 'white',
'background-color': 'green',
'width': '200px'
});
};
$scope.remove = function () {
angular.element(
$document[0].querySelector('#ide')).css({
'color': 'black',
'background-color': 'white'
});
};
}
]);
</script>
</body>
</html>
Output:

Example 2: This is another example that illustrates the implementation of angular.element() Function in
AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title>angular.element()</title>
</head>

GeeksforGeeks
</h1>
<h3> angular.element() </h3>
<input type="text" id="text" ng-model="myVal" />
<button ng-click="getVal()">
Click me!
</button>
<br />
<b>You typed:</b> {{value}}
</div>
<script>
'$document', function ($scope, $document) {
$scope.myVal = "";
$scope.getVal = function () {
$scope.value = angular.element(
$document[0].querySelector(
'#text')).val();
}
}]);
</script>
</body>
</html>
Output:
 AngularJS angular.equals() Function

The angular.equals() Function in AngularJS is used to compare two objects or two values whether these are the
same or not. If the two values are the same, it returns TRUE else it will return FALSE. The angular.equals() Function
supports value types, regular expressions, arrays and objects.
Syntax:
angular.equals(val1, val2);
Parameter value:
 val1 & val2: It specifies the values or the objects that is to be compared.
Return Value: Returns a boolean value ie either TRUE or FALSE.
Example 1: This example illustrates the implementation of the angular.equals() Function in AngularJS, by comparing
the values.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title>angular.equals()</title>
</head>

GeeksforGeeks
</h1>
<h2>angular.equals()</h2>
<div ng-controller="geek"> Input A:
ng-model="val1"
ng-change="check()" />
<br /><br> Input B:
ng-model="val2"
ng-change="check()" />
<br /><br> {{msg}}
</div>
<script>
$scope.val1 = 0;
$scope.val2 = 0;
if(angular.equals($scope.val1, $scope.val2))
$scope.msg =
"Input values are equal.";
else $scope.msg =
"Input values are not equal.";
}
}]);
</script>
</body>
</html>
Output:

Example 2: This example illustrates the implementation of the angular.equals() Function in AngularJS, by verifying its
value type to authenticate the password.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title>angular.equals()</title>
</head>

GeeksforGeeks
</h1>
<h2>angular.equals()</h2>
<div ng-controller="geek"> Password:
<br>
<input type="password" ng-model="pass" />
<br><br> Confirm Password:
<br>
<input type="password"
ng-model="PASS"
ng-change="match()" /><br />
<p ng-show="isMatch" style="color:green">
Password matched
</p>

<p ng-hide="isMatch || PASS==null"
style="color:red">
Password does not match
</p>

</div>
<script>
$scope.match = function() {
$scope.isMatch = angular.equals(
$scope.pass, $scope.PASS);
}
}]);
</script>
</body>
</html>
Output:
 AngularJS angular.forEach() Function

The angular.forEach() Function in AngularJS is used to iterate through each item in an array or object. It works
similar to the for loop and this loop contains all properties of an object in key-value pairs of an object.
Syntax:
angular.forEach(object, iterator, [context])
Parameter Values:
 object: It refers to the object to be iterated.
 iterator: It refers to the iterator function(value, key, obj).
 context: This is optional. It refers to the object which becomes context for iterator function.
Example:
<html>
<head>
<script src=
</script>
<title>angular.forEach()</title>
</head>

<body ng-app="app" ng-cloak style="padding:30px">
<h2>angular.forEach()</h2>
<p>Searching techniques:</p>
<div ng-repeat="name in names">
<ul><li>{{name}}</li></ul>
</div>
</div>
<script>
$scope.names = [];
var values = [
{name: 'Binary Search'},
{name: 'Linear Search'},
{name: 'Interpolation Search'}
];
angular.forEach(values, function (value, key) {
$scope.names.push(value.name);
});
}]);

</script>
</body>
</html>
Output:
 AngularJS angular.isArray() Function

The angular.isArray() Function in AngularJS is used to return TRUE if the reference is an array and FALSE if it is
not an array.
Syntax:
angular.isArray(value);
Parameter:
 value: It specifies the reference to check the value.
Return value: Returns TRUE if the value is an array else it will return FALSE.
Example 1: This example describes the basic usage of angular.isArray() Function in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.isArray()</title>
<script src=
</script>
</head>

<h2>angular.isArray()</h2>
<b>Sorting Algos:</b>
<div ng-repeat="i in sort">{{i.name}}</div>
<br><br>isArray: {{isArray}}
</div>

<script>
function ($scope) {
$scope.sort = [];
var values = [
{ name: 'Merge sort' },
{ name: 'Quick sort' },
{ name: 'Bubble sort' }
];
if (angular.isArray(values)) {
$scope.isArray = true;
angular.forEach(values,
function (value, key) {
$scope.sort.push(value)
})
}
}]);
</script>
</body>

</html>
Output:
Example 2: This is another example that describes the usage of angular.isArray() Function in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.isArray()</title>
<script src=
</script>
</head>

<body ng-app="app" style="text-align: Center">
<h2>angular.isArray()</h2>
<b>Input: </b>{{name}}
<br /><br />
<b>isArray:</b> {{isArray}}
</div>
<script>
function ($scope) {
var values = 'GeeksforGeeks';
$scope.name = values;
$scope.isArray = angular.isArray(values);
},
]);
</script>
</body>

</html>
Output:
 AngularJS angular.isDate() Function

The angular.isDate() function in AngularJS is used to determine whether the value of the date is valid or not. It
returns true if the reference is a date else false.
Syntax:
angular.isDate( value );
Parameters: This function accepts a single parameter:
 value: It stores the data object.
Return Value: It returns true if the value passed is a date else return false.
Example 1: This example uses angular.isDate() function to determine the value of the date is valid or not.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.isDate() function</title>
<script src=
</script>
</head>

<h2>angular.isDate()</h2>
<b>Date:</b> {{ date }}<br>
<br> isDate: {{isDate}}
</div>
<script>
$scope.date = new Date;
$scope.isDate = angular.isDate($scope.date)
}]);
</script>
</body>
</html>
Output:

Example 2: This example uses angular.isDate() function in AngularJS by specifying the different date format..
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.isDate() function</title>
<script src=
</script>
</head>

<body ng-app="app"
<h2>angular.isDate()</h2>
<b>Date:</b>
{{ date | date : " MMM dd, yyyy, hh:mm:ss "}}
<br /><br />
isDate: {{isDate}}
</div>

<script>
function($scope) {
$scope.date = new Date();
$scope.isDate = angular.isDate($scope.date);
},
]);
</script>
</body>
</html>
Output:
 AngularJS angular.isDefined() Function
The angular.isDefined() function in AngularJS is used to determine the value inside isDefined function is defined
or not. It returns true if the reference is defined otherwise returns false.
Syntax:
angular.isDefined( value );
Parameter value:
 value: This parameter is a reference to check whether the entered value is defined or not.
Return Value: It returns true if the passed value is defined otherwise returns false.
Example: This example uses angular.isDefined() function to determine the value inside isDefined function is
defined or not.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.isDefined()</title>
<script src=
</script>
</head>

<body ng-app="app"
GeeksforGeeks
</h1>
<h3>angular.isDefined()</h3>
<b>Date:</b> {{date}}
<br><br> {{isDefined}}
</div>


<script>
$scope.date;
$scope.isDefined =
angular.isDefined($scope.date) == true ?
"$scope.date is defined." : "$scope.date is undefined.";
}]);
</script>
</body>
</html>
Output:
 Date is not Defined:
 If Date is defined and its value is “2019-04-07T23:46:20.586”:
Example 2: This example describes the usage of angular.isDefined() Function in AngularJS by specifying the
current time.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.isDefined()</title>
<script src=
</script>
</head>

<body ng-app="app"
<h3>angular.isDefined()</h3>
<b>Time:</b> {{ today| date : 'mediumTime'}}
<br /><br /> {{isDefined}}
</div>


<script>
function($scope) {
$scope.today = new Date();
$scope.isDefined =
angular.isDefined($scope.today) == true ?
'$scope.date is defined.' : '$scope.date is undefined.';
},
]);
</script>
</body>
</html>
Output:
 Time is not Defined:

 When Time is defined:

 AngularJS angular.isElement() Function
The angular.isElement() Function in AngularJS is used to determine if the parameter inside isElement function is
a HTML DOM element or not. It returns true if the reference is a DOM element or else false.
Syntax:
angular.isElement(value)
Parameter:
 value: It is used to validate whether the passed argument is an HTML DOM element or not.
Return Value: It returns a boolean value, i.e, returns true if the value passed is an HTML DOM element or else
returns false.
Example: This example illustrates the use of the angular.isElement() Function in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title>angular.isElement()</title>
</head>

<body ng-app="testApp" style="text-align:center">
GeeksforGeeks
</h1>
<h2>angular.isElement()</h2>
<div ng-controller="geek"><br>
<b>Input1:</b>
<code>
{'destroy': true, 'create': false}
</code>
<br>
<b>isElement:</b> {{ isElement1 }}
<br><br><br>
<b>Input2:</b>
<code>
window.getElementByID('myButton')
</code>
<br>
<br><br>
<button id="myButton"> Button</button>
</div>
<script>
var app = angular.module('testApp', []);
$scope.obj1 = {
'destroy': true,
'create': false
};
$scope.obj2 = document.getElementById('myButton');
$scope.isElement1 = angular.isElement($scope.obj1);
});
</script>
</body>
</html>
Output:
Example 2: This is another example that describes the angular.isElement() Function in AngularJS, by checking
both the input values whether it is HTML DOM element or not.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title> angular.isElement() </title>
</head>

<body ng-app="testApp" style="text-align:center">
<h2>angular.isElement()</h2>
<div ng-controller="geek"><br>
<b>Input1:</b>
<code>
["DSA", "Algo", "Web Tech"]
</code><br>
<br><br><br>
<b>Input2:</b>
<code>
window.getElementByID('myDiv')
</code><br>
<br><br>
<div id="myDiv">Div element</div>
</div>
<script>
var app = angular.module('testApp', []);
$scope.obj1 = ["DSA", "Algo", "Web Tech"];
$scope.obj2 = document.getElementsByClassName('division');
});
</script>
</body>
</html>
Output:

 AngularJS angular.isFunction() Function
The angular.isFunction() Function in AngularJS is used to determine if the parameter inside isFunction function
is a function or not. It returns true if the reference is a function else false.
Syntax:
angular.isFunction(value);
Parameter:
 value: This parameter specifies whether the passed value is a function or not.
Return Value: It returns true if the value passed is a function else false.
Example 1: This example describes the basic usage of angular.isFunction() Function in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title> angular.isFunction() </title>
</head>

<body ng-app="app"
GeeksforGeeks
</h1>
<h2>angular.isFunction()</h2>
<b>Input1: </b>
<span>
<code>
obj = [{ name: "Abc"}, { name: "Xyz"}];
</code>
</span><br>
<b>IsFunction: </b> {{isFunction1}}<br />
<br><br>
<b>Input2: </b>
<code>
var Add = function () {
return null;
};
</code><br>
<b>IsFunction:</b> {{isFunction2}}
</div>
<script>
var obj = [{
name: "Abc"
}, {
name: "Xyz"
}];
var Add = function() {
return null;
};
$scope.isFunction1 = angular.isFunction(obj);
$scope.isFunction2 = angular.isFunction(Add);
}]);
</script>
</body>
</html>
Output:
Example 2: This is another example that describes the usage of angular.isFunction() Function in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title> angular.isFunction() </title>
</head>

<body ng-app="app"
GeeksforGeeks
</h1>
<h2>angular.isFunction()</h2>
<b>Input1: </b>
<span>
<code>
var arr = ['DSA','Algorithms','Web tech'];
</code>
</span><br>
<b>IsFunction: </b> {{isFunction1}}<br />
<br><br>
<b>Input2: </b>
<code>
Add = () =>{ return null; };
</code><br>
<b>IsFunction:</b> {{isFunction2}}
</div>
<script>
var arr = ['DSA', 'Algorithms', 'Web tech'];
Add = () => {
return null;
};
$scope.isFunction1 = angular.isFunction(arr);
$scope.isFunction2 = angular.isFunction(Add);
}]);
</script>
</body>
</html>
Output:

 AngularJS angular.isNumber() Function
The angular.isNumber() function in AngularJS is used to determine the parameter inside isNumber function is a
number or not. It returns true if the reference is a number otherwise returns false.
Syntax:
angular.isNumber( value );
Parameter value:
 value: It determines whether the entered value is a number or not.
Return Value: It returns a boolean value if the passed value is a number as true, otherwise returns false.
Example: This example illustrates the angular.isNumber() function in AngularJS, to check whether the entered
value is a number or not.
 HTML
<!DOCTYPE html>
<html>
<script src=
</script>

<body>
<div ng-app="app"
ng-controller="gfgCtrl"
<h2>angular.isNumber()</h2><br>
<b>Is {{ data1 }} a number?</b><br>
<b>{{ data2 }}</b>
</div>
<script>
app.controller('gfgCtrl', function($scope) {
$scope.data1 = 26;
$scope.data2 = angular.isNumber($scope.data1);
});
</script>
</body>
</html>
Output:

Example: This example uses angular.isNumber() function to determine whether the given input is a number or
not.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.isNumber()</title>
<script src=
</script>
</head>

<h2>angular.isNumber()</h2>
<b>Input1: </b>
<span>
<code>
123
</code>
</span>
<br>
<b>IsNumber: </b>{{isNumber1}}
<br /><br><br>
<b>Input2: </b>
<code>
"geeksforgeeks"
</code>
<br>
<b>IsNumber:</b> {{isNumber2}}
</div>


<script>
var obj1 = 123;
var obj2 = "geeksforgeeks";
$scope.isNumber1 = angular.isNumber(obj1);
$scope.isNumber2 = angular.isNumber(obj2);
}]);
</script>
</body>
</html>
Output:
 AngularJS angular.isObject() Function

The angular.isobject() Function in AngularJS is used to determine if the parameter inside isobject function is an
object or not. It returns true if the reference is an object or else false.
Syntax:
angular.isobject(value);
Parameter:
 value: This parameter value validates whether the entered value is an object or not.
Return Value: It returns true if the value passed is an object else false.
Example 1: This example describes the angular.isObject() Function in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<title>angular.isObject()</title>
</head>

<h2>angular.isObject()</h2>
<b>Input1: </b>
<span>
<code>
obj1 = {"Name": "Binary search"}
</code>
</span>
<br>
<b>isObject: </b>{{isObject1}}
<br /><br><br>
<b>Input2: </b>
<code>
"geeksforgeeks"
</code>
<br>
<b>isObject:</b> {{isObject2}}
</div>
<script>
var obj1 = {
"Name": "Binary search"
};
$scope.isObject1 = angular.isObject(obj1);
$scope.isObject2 = angular.isObject(obj2);
}]);
</script>
</body>
</html>
Output:
Example 2: This example describes the angular.isObject() Function in AngularJS, where both the input values
are validated.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>angular.isObject()</title>
<script src=
</script>
</head>

<h2>angular.isObject()</h2>
<b>Input 1: </b>
<span>
<code> obj1 ={{val1}} </code>
</span>
<br /><br />
<b> isObject: </b>{{isObject2}}
<br /><br />
<b>Input 2:</b>
<span>
<code> obj2 = null; </code>
</span>
<br /><br />
<b>isObject: </b> {{isObject1}}
</div>

<script>
app.controller('geek', [
'$scope',
function ($scope) {
var val2 = null;
$scope.val1 = [
{ Name: 'Merge Sort' },
{ Name: 'Quick Sort' },
{ Name: 'Selection Sort' },
];

$scope.isObject1 =
angular.isObject($scope.val2) == true ? 'true.' : 'false';

$scope.isObject2 =
angular.isObject($scope.val1) == true ? 'true' : 'false';
},
]);
</script>
</body>
</html>
Output:
 AngularJS angular.isString() Function

The angular.isString() function in AngularJS is used to determine the parameter inside isString function is a string
or not. It returns true if the reference is a string otherwise returns false.
Syntax:
angular.isString( value )
Return Value: It returns true if the value passed is a string otherwise return false.
Example: This example uses angular.isString() function to determine the parameter inside isString function is a
string or not.
<!DOCTYPE html>
<html>
<head>
<title>angular.isString() function</title>

<script src=
</script>
</head>

<h2>angular.isString()</h2>

<b>Input1: </b>
<span>
<code>123</code>
</span>
<br>

<b>isString: </b>{{isString1}}<br /><br><br>
<b>Input2: </b>

<code>
"geeksforgeeks"
</code>
<br>

<b>isString:</b> {{isString2}}
</div>


<script>
var obj1 = 123;
$scope.isString1 = angular.isString(obj1);
$scope.isString2 = angular.isString(obj2);
}]);
</script>
</body>
</html>
Output:
 AngularJS angular.isUndefined() Function

The angular.isUndefined() function in AngularJS is used to determine the value inside isUndefined function is
undefined or not. It returns true if the reference is undefined otherwise returns false.
Syntax:
angular.isUndefined( value )
Return Value: It returns true if the value passed is undefined else returns false.
Example: This example uses angular.isUndefined() function to determine the value inside isUndefined function is
undefined or not.
<!DOCTYPE html>
<html>
<head>
<title>angular.isUndefined() function</title>

<script src=
</script>
</head>

<h2>angular.isUndefined()</h2>

<div ng-controller="isDefinedController">
<b>Date:</b> {{date}}<br><br>
{{isUndefined}}
<br><br><br>
<b>Date1:</b> {{date1}}<br><br>
{{isUndefined1}}

</div>


<script>
app.controller('isDefinedController',
['$scope', function ($scope) {
$scope.date = new Date;
$scope.date1;

$scope.isUndefined = angular.isUndefined($scope.date)
== true ? "$scope.date is Undefined."
: "$scope.date is not Undefined.";

$scope.isUndefined1 = angular.isUndefined($scope.date1)
== true ? "$scope.date1 is Undefined."
: "$scope.date1 is not Undefined.";
}]);
</script>
</body>
</html>
Output:
 AngularJS Filters Complete Reference
Filters are added in the AngularJS for the sake of making the formatting and working with data easier. Filters are
used to format the value of an expression for a display to the user.
The Complete List of filters are listed below:
 AngularJS Filters
There are some filters that are added in the AngularJS for the sake of making the formatting and working with data
easier. There are several in-built filters in AngularJS. They are listed here along with some examples to make the
understanding easier.
Basic Syntax:
Filters are generally added to the expressions by using the pipe (|) character.
For example, the filter {{ fullName | uppercase }} formats the fullName into the uppercase format.
Some of the pre-built filters in AngularJS are:
 currency The number is formatted to currency format.
 date The date is specified to a specific format.
 filter The array is filtered on the basis of the provided criteria.
 limitTo The array or an string is limited into a specified number of elements/characters.
 number A number if formatted to a string.
 orderBy The array is ordered by an expression.
 lowercase This filter converts a string to lowercase letters.
 uppercase This filter converts a string to uppercase letters.
 json It converts a JavaScript object into a JSON string.
1. Currency Filter:
This filter simply formats a number as currency.
<!DOCTYPE html>
<html>
<script src=
</script>

<body>

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

<h1>Currency Format - GeeksforGeeks</h1>
<h2>Price: {{ price | currency }}</h2>

</div>

<script>
app.controller('costCtrl', function($scope) {
$scope.price = 20;
});
</script>

</body>

</html>
2. Output:
3. Here, the dollar ($) sign has been added automatically in front of the numerical value.
4. Date Filter:
The date filter formats a date to a specified format.
Syntax:
{{ date | date : format : timezone }}
<!DOCTYPE html>
<html>
<script src=
</script>

<body>

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

<h1>GeeksforGeeks - Date Filter</h1>
<p>Date = {{ today | date }}</p>

</div>

<script>
app.controller('datCtrl', function($scope) {
});
</script>

</body>

</html>
Output:
Here, the date() function has been used and that displays the current date.
5. Filter:
This is used to display only the required objects. The filter selects a subset of an array.
For example, This filter can be used only on arrays as this returns an array containing only the matching
items(condition given in the array).
<!DOCTYPE html>
<html>
<script src=
</script>

<body>

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

<h1>filter - GeeksforGeeks</h1>

<ul>
<li ng-repeat="x in names | filter : 'e'">
{{ x }}
</li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>

<p>This example displays only the names
containing the letter "e".</p>

</body>

</html>
6. Output:
7. limitTo Filter:
This filter returns an array or a string containing only a specified number of elements. The output will
depend on the type of input that is given to the program. When used for arrays, it returns an array
containing only the specified number of items.
In the case of the string, it returns a string containing, only the specified number of characters, while when
used for numbers, it returns a string containing only the specified number of digits.
Syntax:
{{ object | limitTo : limit : begin }}
Here, limit specifies the number of elements to be displayed, while begin specifies where to begin the limitation
from.
<!DOCTYPE html>
<html>
<script src=
</script>

<body>

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

<h1>limitTo - GeeksforGeeks</h1>
<ul>
<li ng-repeat="x in cars | limitTo : 4 : 1">{{x}}</li>
</ul>

</div>

<script>
app.controller('sizeCtrl', function($scope) {
$scope.cars = ["Audi",
"BMW",
"Dodge",
"Fiat",
"Ford",
"Volvo",
"Lamborghini"];
});
</script>

<p>Filter applied from first
element to the fifth element.</p>

</body>

</html>
Output:
8. orderBy Filter:
This is used for sorting an array. Strings (default alphabetically) and numbers (default ascending) can be
sorted using this filter.
Syntax:
{{ array | orderBy : expression : reverse }}
Here, the reverse can be used to reverse the order of the resulting array.
<!DOCTYPE html>
<html>
<script src=
</script>

<body>

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

<h1>orderBy - GeeksforGeeks</h1>
<ul>
<li ng-repeat="x in customers | orderBy : 'city'">
{{x.name + ", " + x.city}}
</li>
</ul>

</div>

<script>
app.controller('orderCtrl', function($scope) {
$scope.customers = [{
"name": "Delhi"
}, {
"name": "Mumbai"
}, {
"name": "Patna"
}, {
"name": "Kolkata"
}, {
"name": "Pune"
}, {
"name": "Ranchi"
}, {
"name": "Bhopal"
}];
});
</script>

<p>Sorting in ascending order.</p>

</body>

</html>
Output:
9. number Filter:
Probably the simplest filter. It simply formats a number to a string.
Syntax:
{{ string | number : fractionsize}}
Here, ‘fractionsize’ specifies the number of decimals.
<!DOCTYPE html>
<html>
<script src=
</script>
<body>

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

<h1>number Filter - GeeksforGeeks</h1>
<h2>Rs.{{money | number : 3}}</h2>

</div>

<script>
app.controller('nCtrl', function($scope) {
$scope.money = 999999;
});
</script>

<p>The money is written with three decimals.</p>

</body>
</html>
Output:
10. lowercase Filter:

This filter simply converts a string to lowercase letters.
Syntax:
{{ string | lowercase }}
Let’s have a look at an example to get clear about this filter.
<!DOCTYPE html>
<html>
<script src=
</script>

<body>

<h2>AngularJS - lowercase</h2>
<br>
<br>

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

<strong>Input:</strong>
<br>
<input type="text" ng-model="string">
<br>
<br>
<strong>Output:</strong>
<br> {{string|lowercase}}

</div>

<script>
$scope.string = "";
});
</script>

</body>

</html>
The code mentioned above asks the user for an input. After the user enters a term in the input box, it gets stored in
the ng-model=”string”. Now, the AngularJS will resolve the expression, and return the result exactly where the
expression is written. AngularJS expressions can be written inside double braces, like this: {{ expression }}.
Output:
Here in this code, the output {{string}} is displayed just below the input box. However, to change the input string to
lowercase, ‘|lowercase’ must be added to the expression’s name.
Therefore, {{string|lowercase}} will return the input string in the lowercase format.
11. uppercase Filter:
The uppercase Filter in AngularJS is used to change a string to uppercase string or letters.
Syntax:
{{ string | uppercase}}
<!DOCTYPE html>
<html>
<script src=
</script>
<body>

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

<h1>{{txt | uppercase}}</h1>

</div>

<script>
app.controller('caseCtrl', function($scope) {
$scope.txt = "GeeksforGeeks!";
});
</script>

<p>The text is written in uppercase letters.</p>

</body>
</html>
Output:
12. json Filter:

This filter simply converts a JavaScript object into a JSON string, and this is very much useful while the
debugging of applications.
Syntax:
{{ object | json : spacing }}
Here, spacing specifies the number of spaces to use per indentation. The default value is 2, however, this value is
optional.
Have a look at this example code:
<!DOCTYPE html>
<html>
<script src=
</script>
<body>

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


<pre>{{customer | json : 20}}</pre>

</div>

<script>
app.controller('jsCtrl', function($scope) {
$scope.customer = {
"name" : "Milk",
"city" : "Patna",
"country" : "India"
};
});
</script>

<p>A JSON string with 20 spaces per indentation.</p>

</body>
</html>
Output:
13. Let’s have a look at the example of an array filter.
<!DOCTYPE html>
<html>

<body>


<p>Click the button to get every element
in the array that has a value of 38 or more.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var num = [23, 32, 56, 30, 56, 45, 34, 39];

function checkNum(num) {
return num >= 38;
}

function myFunction() {
document.getElementById(
"demo").innerHTML = num.filter(checkNum);
}
</script>

</body>

</html>
14. On clicking the ‘Try it’ button, all the elements in the array that has a value of 38 or more gets printed to the
screen.
 AngularJS currency Filter

AngularJS currency filter is used to convert a number into a currency format. If no currency format is specified
currency filter uses the local currency format.
Syntax:
{{ currency_expression | currency : symbol : fractionSize}}
Parameters: It contains 2 parameters as mentioned above and described below:
 symbol: It is an optional parameter. It is used to specify the currency symbol. The currency symbol can
be any character or text.
 fractionsize: It is an optional parameter. It is used to specify the number of decimals.
Example 1: This example displays the number in Indian currency format with two decimals by using the currency
filter in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>Currency Filter</title>
<script src=
</script>
</head>

<body style="text-align: center;">
<h3>AngularJS currency Filter</h3>
<div ng-app="gfgApp" ng-controller="currencyCntrl">
<h3>
Currency filter with currency

symbol and fraction size.
</h3>
<p>Amount : {{ amount | currency : "₹" :2}}</p>
</div>

<script>
var app = angular.module('gfgApp', []);
app.controller('currencyCntrl', function ($scope)

{
$scope.amount = 75.648;
});
</script>
</body>
</html>
Output:
Example 2: This example displays the number in currency format by using the currency filter in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>Currency Filter</title>
<script src=
</script>
</head>

<h3>AngularJS Currency Filter</h3>
<div ng-app="gfgApp" ng-controller="currencyCntrl">
<h3>
Currency filter without currency
symbol and fraction size.
</h3>
<p>Amount : {{ amount | currency}}</p>
</div>

<script>
app.controller('currencyCntrl', function ($scope)

{
$scope.amount = 38;
});
</script>
</body>
</html>
Output:
 AngularJS date Filter
AngularJS date filter is used to convert a date into a specified format. When the date format is not specified, the
default date format is ‘MMM d, yyyy’.
Syntax:

{{ date | date : format : timezone }}
Parameter Values: The date filter contains format and timezone parameters which is optional.
Some common values used in format are as follow:

 ‘yyyy’ – define year ex. 2019
 ‘yy’ – define year ex. 19
 ‘y’ – define year ex. 2019
 ‘MMMM’ – define month ex. April
 ‘MMM’ – define month ex. Apr
 ‘MM’ – define month ex. 04
 ‘dd’ – define day ex. 09
 ‘d’ – define day ex. 9
 ‘hh’ – define hour in AM/PM
 ‘h’ – define hour in AM/PM
 ‘mm’ – define minute
 ‘m’ – define minute
 ‘ss’ – define second
 ‘s’ – define second
Some predefined values for format are as follow:

 “short” – equivalent to “M/d/yy h:mm a”
 “medium” – equivalent to “MMM d, y h:mm:ss a”
 “shortDate” – equivalent to “M/d/yy” (5/7/19)
 “mediumDate” – equivalent to “MMM d, y” (May 7, 2019)
 “longDate” – equivalent to “MMMM d, y” (May 7, 2019)
 “fullDate” – equivalent to “EEEE, MMMM d, y” (Tuesday, May 7, 2019)
 “shortTime” – equivalent to “h:mm a” (2:35 AM)
 “mediumTime” – equivalent to “h:mm:ss a” (2:35:05 AM)
Example 1: This example display the date in given format.

 html
<!DOCTYPE html>
<html>
<head>
<title>Date Filter</title>

<script src=
</script>
</head>

<body>

<div ng-app="gfgApp" ng-controller="dateCntrl">

<p>{{ today | date : "dd.MM.y" }}</p>

</div>

<script>
app.controller('dateCntrl', function($scope) {
});
</script>
</body>
</html>
Output:

07.05.2019
Example 2: This example display the time in specified format.

 html
<!DOCTYPE html>
<html>
<head>

<script src=
</script>
</head>

<body>


<p>{{ today| date : 'mediumTime'}}</p>

</div>

<script>
});
</script>
</body>
</html>
Output:

2:37:23 AM
Example 3: This example display the date in specified format.
 html
<!DOCTYPE html>
<html>
<head>

<script src=
</script>
</head>

<body>


<p>{{ today| date }}</p>

</div>

<script>
});
</script>
</body>
</html>
Output:
May 7, 2019
 AngularJS filter Filter
The “filter” Filter in AngularJS is used to filter the array and object elements and return the filtered items. In other
words, this filter selects a subset (a smaller array containing elements that meet the filter criteria) of an array from
the original array.
Syntax:
{{arrayexpression | filter: expression : comparator : anyPropertyKey}}
Parameter Values:
 arrayexpression: The source array on which the filter will be applied.
 expression: It is used to select the items from the array after the filter conditions are met. It can be of
String type, Function type, or Object type.
 comparator: It is used to determine the value by comparing the expected value from the filter expression,
and the actual value from the object array.
 anyPropertyKey: It is an optional parameter having the special property that is used to match the value
against the given property. It is of String type & its default value is $.
Example 1: This example describes the AngularJS filter Filter by filtering & rendering the name only having the
character “e” in the name.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS filter Filter</title>
<script src=
</script>
</head>

<body>
<div ng-app="myApp"
ng-controller="namesCtrl">
GeeksforGeeks
</h1>
<h3>AngularJS filter Filter</h3>
<ol>
<strong>
<li ng-repeat="x in names | filter : 'e'">
{{ x }}
</li>
</strong>
</ol>
</div>
<script>
angular.module('myApp', [])
.controller('namesCtrl', function($scope) {
$scope.names = [
'Jani', 'Carl', 'Margareth',
'Hege Mathew', 'Joey Tribiani',
'Gustav', 'Birgit', 'Mary', 'Kai'
];
});
</script>
<p>
This example displays the names containing the
character "e"(filter)
</p>
</body>
</html>
Output:

Example 2: This example uses an object to filter its element.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>
AngularJS filter Filter
</title>
<script src=
</script>
</head>

<body>
<div ng-app="myApp" ng-controller="arrCtrl">
GeeksforGeeks
</h1>
<h3>
</h3>
<ol>
<li ng-repeat=
"x in customers | filter :{'name' : 'e', 'city' : 'Patna'}">
{{x.name + ", " + x.city}}
</li>
</ol>
</div>

<p>
The filter will give a match if there is an
"e" character in the name, and the city is
"Patna". Milk wasn't matched because the alphabet
'e' is not present.
</p>

<script>
app.controller('arrCtrl', function ($scope) {
"name": "Chocolate Shake",
"city": "Patna"
}, {
"name": "Hot Chocolate",
"city": "Delhi"
}, {
"name": "Milk",
"city": "Patna"
}, {
"name": "Coffee",
"city": "Patna"
}, {
"name": "Tea",
"city": "Pune"
}, {
"name": "Mineral Water",
"city": "Mumbai"
}, {
"name": "Iced Tea",
"city": "Bangalore"
}];
});
</script>
</body>

</html>
Output:

Example 3: In this example, we are going to see a “strict” caparison that does not return any value unless it is a
pure match.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>
</title>
<script src=
</script>
</head>

<body>
<div ng-app="myApp"
ng-controller="arrCtrl">
GeeksforGeeks
</h1>
<h3>
</h3>
<ol>
<li ng-repeat=
"x in customers | filter : 'Chinchwad' : true">
{{x.name + ", " + x.city}}
</li>
</ol>
</div>

<p>
The filter will give a match for the array
item(s) where one or more object values are
"Chinchwad".
</p>

<script>
app.controller('arrCtrl', function($scope) {
"name": "Mumbai Food",
"city": "Chinchwad"
}, {
"name": "Gurgaon Catering",
"city": "Haryana City"
}, {
"name": "Noida temperature",
"city": " Chinchwad"
}, ];
});
</script>
</body>
</html>
Output:

 AngularJS json Filter
The json filter in AngularJs is used to convert a JavaScript object into a JSON. string.JavaScript object that we are
using can be of any kind of JavaScript Object. The json filter piped the object or any expression with JSON so that
the result will be displayed in the form of a list, which is bound with the expression syntax.
Syntax:
{{ object | json : spacing }}
Parameter value:
 json: It is used to specify that the object should be displayed in JSON format.
 spacing: It is an optional parameter with a default value of 2 that specifies the number of spaces per
indentation.
Example 1: This example will display the marks of students in JSON.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS json Filter</title>
<script src=
</script>
</head>

<div ng-app="result" ng-controller="resultCtrl">
<h1 style="color:green ;">GeeksforGeeks</h1>
<h3>AngularJS json Filter</h3>
<h4>Result:</h4>
<pre>{{marks | json}}</pre>
</div>

<script>
var app = angular.module('result', []);
app.controller('resultCtrl', function ($scope) {
$scope.marks = {
"Math": 98,
"Computer": 93,
"Physics": 95,
"Chemistry": 95,
"English": 74
};
});
</script>
</body>
</html>
Output:

Example 2: This example will display the fruits name in JSON with 10 spaces per indentation
 HTML
<!DOCTYPE html>
<html>

<head>
<title>AngularJS json Filter</title>
<script src=
</script>
</head>

<h1 style="color:green ;">GeeksforGeeks</h1>
<h3>AngularJS json Filter</h3>
<div ng-app="fruit" ng-controller="fruitCtrl">
<h4>Fruits:</h4>
<pre>{{fruit | json : 10}}</pre>
</div>

<script>
var app = angular.module('fruit', []);
app.controller('fruitCtrl', function ($scope) {
$scope.fruit = ["Apple", "Banana", "Mango"];
});
</script>
</body>
</html>
Output:
 AngularJS limitTo Filter

The limitTo filter in AngularJS is used to returns an array or a string which contains a specified number of
elements. This filter can be used with arrays, strings, and numbers. The basic principle, however, remains the same
in all the three cases.
 For arrays, it returns an array containing only the specified number of items.
 When used for strings, it returns another string containing the specified number of characters.
 In the case of numbers, it returns a string containing only the specified number of digits.
 Negative numbers are used to return elements starting from the end of the element, instead of the
beginning.
Syntax:
{{ object | limitTo : limit : begin }}
Parameters:
 limit: Number of returned elements.
 begin: Begin point of limitation. default is 0.
Example-1:
<!DOCTYPE html>
<html>
<script src=
</script>

<body>

<h2>AngularJS - limitTO</h2>
<br>
<br>


<br>
<br>
<br>
<br>
{{string|limitTo:4}}

</div>

<script>
$scope.string = "";
});
</script>

</body>

</html>
Output:
Let’s have a look at another example to make things more clear.

Example-2:
<!DOCTYPE html>
<html>
<script src=
</script>

<body>

<h2>AngularJS - limitTO</h2>
<br>
<br>

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

<br>
<input type="text"
ng-model="firstName">
<br>
<br>
<br> {{firstName|limitTo:8}}

</div>

<script>
$scope.firstName = "";
});
</script>

</body>

</html>
Output:
In this example, we can see that the limit in the ‘firstName’ expression has been specified to 8. Therefore it doesn’t
matter how long the first name of the user is, only the first 8 characters of the first name will be displayed.
 AngularJS lowercase Filter
AngularJS provides different filters to format the data. The lowercase Filter formats the given string to the
lowercase. In order to transmit & render the data from a TypeScript code to an HTML template (view), the
interpolation concept can be utilized. The lowercase filter is piped with an expression that is declared inside the
interpolation syntax.
Syntax:
{{expression|lowercase}}
Example 1: This example describes the AngularJS lowercase Filter by converting the entered string to
lowercase.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body style="text-align:center;">
<h3>AngularJS lowercase Filter</h3>
<br>
<br>
<br> {{string|lowercase}}
</div>
<script>
app.controller('myCtrl', function ($scope) {
$scope.string = "";
});
</script>
</body>
</html>
Output:

Example 2: This example describes the AngularJS lowercase Filter by transforming the multiple lines of strings.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body style="text-align:center;">
<h3>AngularJS lowercase Filter</h3>
<strong>First Name:</strong>
<br>
<input type="text" ng-model="firstName">
<br>
<strong>Last Name:</strong>
<br>
<input type="text" ng-model="lastName">
<br>
<br> {{firstName|lowercase}}
{{lastName|lowercase}}
</div>

<script>
$scope.firstName = "";
$scope.lastName = "";
});
</script>
</body>
</html>
Output:
 AngularJS number Filter

AngularJS number filter is used to convert a number into a string or text. We can also define a limit to display a
number of decimal digits. The number filter rounds off the number to specified decimal digits.
Syntax:
{{ string| number : fractionSize}}
Parameter Values: It contains single parameter value fractionsize which is of type number and used to specify the
number of decimals.
Example 1: This example format the number and set it into the fraction with two decimal places.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>Number Filter</title>
<script src=
</script>
</head>

<body>
<div ng-app="gfgApp" ng-controller="numberCntrl">
<h3>Number filter with fraction size.</h3>
<p>Number : {{ value| number : 2}}</p>
</div>
<script>
app.controller('numberCntrl', function($scope) {
$scope.value = 75598.548;
});
</script>
</body>
</html>
Output:

Example 2: This example format the number and set it into the fraction with three decimal places.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>Number Filter</title>
<script src=
</script>
</head>

<body>
<div ng-app="gfgApp" ng-controller="numberCntrl">
<h3>Number filter without fraction size.</h3>
<p>Number : {{ value| number}}</p>
</div>
<script>
app.controller('numberCntrl', function($scope) {
$scope.value = 524598.54812;
});
</script>
</body>
</html>
Output:

 AngularJS orderBy Filter
An orderBy Filter in AngularJS is used to sort the given array to the specific order. The default order of sorting the
string is in alphabetical order whereas the numbers are numerically sorted. By default, all the items are sorted in
ascending order, if the ordering sequence is not specified.
Syntax:
{{ orderBy_expression | orderBy : expression : reverse : comparator }}
Parameter Values:
 expression: This parameter value can be used to determine the order while filtering the items. It can be the
following types:
 Function: This function is invoked by passing each item as an argument & the returned value will
be utilized for sorting the corresponding items.
 String: It can be an expression in AngularJS, that will be evaluated for every item & the output will
be utilized to sort the item.
 Array: It can be utilized when we need to determine more than 1 object property that helps to
organize the sorting order. The array item can contain both the string & function.
 reverse: It is an optional parameter that will be required to reverse the order of the array if its value is set
to true.
Example 1: This example describes the orderBy Filter in Angular JS by specifying the order sequence for the array
item by name.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body>
<div ng-app="myApp"
ng-controller="orderCtrl">
GeeksforGeeks
</h1>
<h3>AngularJS orderBy Filter</h3>
<ul>
<li ng-repeat=
"x in customers | orderBy : 'name'">
{{x.name + ", " + x.city}}
</li>
</ul>
</div>
<script>
app.controller('orderCtrl', function($scope) {
"name": "Amber",
"city": "ajmer"
}, {
"name": "lakshay ",
"city": "vizag"
}, {
"name": "karan",
"city": "London"
}, {
"name": "bhaskar",
"city": "peshawar"
}, ];
});
</script>

<p>The array items are arranged by "name".</p>

</body>
</html>
Output :

Example 2: This example describes the AngularJS orderBy Filter illustrating an order by case when we go through
gdp by “-” and “+” orderBy.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>
AngularJS orderBy Filters
</title>
<script src=
</script>
<style>
.tabled {
float: left;
padding: 10px;
}
</style>
</head>

<body ng-app="orderByDemo">
<div style="text-align:center">
GeeksforGeeks
</h1>
<h3>
AngularJS orderBy Filter
</h3>
</div>
<script>
angular.module('orderByDemo', [])
.controller('orderByController',
['$scope', function($scope) {
$scope.countries = [{
name: 'SPAIN',
states: '78',
gdp: 5
}, {
name: 'FRANCE',
states: '46',
gdp: 4
}, {
name: 'PORTUGAL',
states: '53',
gdp: 3
}, {
name: 'CHILE',
states: '06',
gdp: 2
}, {
name: 'RUSSIA',
states: '21',
gdp: 1
}];
}]);
</script>
<div ng-controller="orderByController">
<table class="tabled">
<tr>
<th>Name</th>
<th>No of States</th>
<th>GDP(descending)</th>
</tr>

<tr ng-repeat="country in countries | orderBy:'-gdp'">
<td>{{country.name}}</td>
<td>{{country.states}}</td>
<td>{{country.gdp}}</td>
</tr>
</table>
<table class="tabled">
<tr>
<th>Name</th>
<th>No of States</th>
<th>GDP(ascending)</th>
</tr>

<tr ng-repeat="country in countries | orderBy:'gdp'">
<td>{{country.name}}</td>
<td>{{country.states}}</td>
<td>{{country.gdp}}</td>
</tr>
</table>
</div>
</body>
</html>
Output:

Example 3: This example describes the AngularJS orderBy Filter that illustrates the sorting of the array items by
country.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
</head>

<body>
<div ng-app="myApplication"
ng-controller="orderCtrl">
GeeksforGeeks
</h1>
<h3>AngularJS orderBy Filter</h3>
<ul>
<li ng-repeat=
"x in sevenwonder | orderBy : '-country'">
{{x.name + ", " + x.country}}
</li>
</ul>
</div>
<script>
var application = angular.module('myApplication', []);
application.controller('orderCtrl', function($scope) {
$scope.sevenwonder = [{
"name": "Great Wall of China",
"country": "China"
}, {
"name": "Christ the Redeemer Statue",
"country": "Brazil"
}, {
"name": "Machu Picchu",
"country": "peru"
}, {
"name": "Chichen Itza ",
"country": "Mexico"
}, {
"name": "The Roman Colosseum",
"country": "Rome"
}, {
"name": "Taj Mahal",
"country": "India"
}, {
"name": "Petra",
"country": "Jordan"
}];
});
</script>

<p>The array items are sorted by "country".</p>

</body>
</html>
Output:

 AngularJs uppercase Filter
The uppercase Filter in AngularJS is used to change a string to an uppercase string or letters.
Syntax:
{{ string | uppercase}}
Example: This example describes the use of the uppercase Filter in AngularJS.
 HTML
<!DOCTYPE html>
<html>

<head>
<title>uppercase Filter</title>
<script src=
</script>
</head>

GeeksforGeeks
</h1>
<h2>AngularJS uppercase Filter</h2>

<p>
<span style="color:green">
{{msg | uppercase}}
</span> is the computer

<p>
</div>

<script>
angular.module('app', [])
.controller('geek',
['$scope', function ($scope) {
$scope.msg = 'GeeksforGeeks';
}]);
</script>
</body>
</html>
Output:

Example 2: This example describes the use of the uppercase Filter in AngularJS by transforming the entered text
to uppercase.
 HTML
<!DOCTYPE html>
<html>

<head>
<script src=
</script>
<style>
body {
text-align: center;
font-family: arial;
}

h1 {
color: green;
}
</style>
</head>

<body>
<h2>AngularJS uppercase Filter</h2>


<br>
<br>
<br> {{string|uppercase}}
</div>

<script>
$scope.string = "";
});
</script>
</body>
</html>
Output:

Angular Js

Uploaded by

Copyright:

Available Formats

Angular Js

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular Js

Uploaded by

Copyright:

Available Formats

AngularJS

Learn more about AngularJS:

<br> {{comName + " "+detail }}

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

$scope.detail = "Learning Together!"

Single Page Applications:

Supports multiple platforms:

 Templates: Provides with simple and smooth UI view with intelligent IDE.

 AngularJS Directives Complete Reference

<h2 style = "color:green">Geeksforgeeks</h2>

<div ng-app="" ng-init="name='GeeksforGeeks'">

<p>{{ name }} is the portal for geeks.</p>

ng-app Start of AngularJS application.

ng-init Used to initialise a variable

ng-model ng-model is used to bind to the HTML controls

ng-bind Binds the value with HTML element

Repeats HTML template once per each item in the specified

ng-show Shows or hides the associated HTML element

ng-readonly Makes HTML element read-only

ng-disabled Use to disable or enable a button dynamically

ng-if Removes or recreates HTML element

ng-click Custom step on click

ng-app Start of AngularJS application.

ng-model ng-model is used to bind to the HTML controls

ng-bind Binds the value with HTML element

Repeats HTML template once per each item in the specified

ng-show Shows or hides the associated HTML element

ng-readonly Makes HTML element read-only

ng-disabled Use to disable or enable a button dynamically

ng-if Removes or recreates HTML element

ng-click Custom step on click

<title>AngularJS ng-app Directive</title>

<h2 style = "color:green">ng-app directive</h2>

<div ng-app="" ng-init="name='GeeksforGeeks'">

<p>{{ name }} is the portal for geeks.</p>

<title>AngularJS ng-init Directive</title>

<h1 style = "color:green">GeeksforGeeks

<div ng-app="" ng-init="sort=['quick sort', 'merge sort',

<li>{{ sort[0] }} </li>

<li>{{ sort[1] }} </li>

<pre> {{ name }} </pre> Checkbox-

<pre> {{ check }} </pre> Radiobox-

<pre> {{ choice }} </pre> Number-

<pre> {{ num }} </pre> Email-

<pre> {{ mail }} </pre> Url-

<pre> {{ url }} </pre>

<input type="date" ng-model="date1" (change)="log(date1)">

<pre> Todays date:{{ date1+1 }}</pre>

<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>

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

$scope.name = "Hello Geeks!";

<body ng-app="app" style="text-align:center">

Name: <input class="form-control" type="text"