pTutorial

New way to learn Programming

AngularJS Directives Example

Angular Directive Example

This AngularJS Directive example explain you the concept behind the ng-app, ng-model, ng-init, ng-model, ng-repeat.

Directives Example

<html>
<head>
<title>AngularJS Directives Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/
angularjs/1.4.8/angular.min.js"></script>

</head>
<body>
<h2>Simple Directives Application</h2>

<div ng-app = "" ng-init="cities=['Delhi','Noida','Gurgaon','Faridabad']"> 
<p>Type Name: <input type = "text" ng-model = "fname"></p>
<p>Hello <span ng-bind = "fname"></span></p>

<p>List of Cities</p>
<ol>
<li ng-repeat = "x in cities">
{{ x }}
</li>
</ol>
</div>
</body>
</html>


Explanation

Cities is a simple array variable initialize using ng-init directive. The array variable having four cities.

ng-model is used to bind the fname to the text box.

ng-bind is used to display the data of ng-model. You can use Angular Expression in place of ng-bind.

ng-repeat is used to iterate the cities array variable.

See Also


QUOTES OF THE DAY

Well-begun is half done.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER