Trending News
Home / Web Development / Angular Js / AngularJS Directives

AngularJS Directives

The AngularJs directive are helps/used to extend the html.To extended HTML attributes in AngularJs directives with prefix ng-.
The ng-app directive used for initializes an AngularJS application.




The ng-init directive used for initializes application data.

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-repeat used for repeating html elements.

ng-app directive

AngularJs application starts with ng-app directive.It defines the root element and automatically initializes or bootstraps the application the AngularJs application is loaded in web page.It is also helps to load various AngularJS modules in AngularJS Application.The ng-app directive also tells AngularJS that the <div> element. Following example, defined a default AngularJS application using ng-app attribute of a div element.

<div ng-app=””>

</div>




ng-init directive

Initializes an AngularJS Application data using ng-init directive.In following example, initialize an array of countries,using JSON syntax to define array of countries.

<div ng-app=”” ng-init=”countries=[{locale:’en-US’,name:’United States’},
{locale:’en-GB’,name:’United Kingdom’},
{locale:’en-FR’,name:’France’}]”>


</div>




ng-model directive

For defines the model/variable to be used in AngularJS Application using ng-model directive. The following example, we’ve defined a model named “name”.

<div ng-app=””>

7lt;p>Enter your Name: <input type=”text” ng-model=”name”<>/p>
</div>

ng-repeat directive





Repeats html elements for each item in a collection using ng-repeat directive.. The following example, we’ve iterated over array of countries.

<div ng-app=””>

<p>List of Countries with locale:</p>
<ol>
<li ng-repeat=”country in countries”>
{{ ‘Country: ‘ + country.name + ‘, Locale: ‘ + country.locale }}
</li>
</ol>
</div>




AngularJs Example




OUTPUT

angularjs2

Loading Facebook Comments ...
Social Media Auto Publish Powered By : XYZScripts.com