Schogini is Magento2 ready. Are you?

Get started with Magento 2 | Need expert Magento2 support?

AngularJs Directives


Date: 2015-11-03 | Category: AngularJS

1. ng-app

The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body>or <html> tags.

<html ng-app> or <body ng-app> or <div ng-app>

<html ng-app>
<title>AngularJS First Application</title>
<body>
<h4>Sample Application</h4>
   <p>First Name: <input type="text" ng-model="fname"></p>
   <p>Last Name: <input type="text" ng-model="lname"></p></p>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>

2. ng-bind

Data binding in AngularJS synchronizes AngularJS expressions with AngularJS data. synchronized with ng-model="fname".

<p>First Name: <input type="text" ng-model="fname"></p>
<p>Last Name: <input type="text" ng-model="lname"></p>
<p>Full Name:  </p>
<p>Full Name: <span ng-bind="fname"></span> <span ng-bind="lname"></span></p>

3. ng-repeat

The ng-repeat directive repeats an HTML element

<div ng-app="" ng-init="names=[
{name:'Jani',score:10},
{name:'Hege',score:30},
{name:'Kai',score:25}]">

<ul>
  <li ng-repeat="x  in names">

  </li>
</ul>

</div>

Exercise

  1. Convertion of Fahrenheit and Centigrade
<DOCTYPE>
<html ng-app>
<head>
<title>Converter</title>
<body ng-init>
    <h3>Conversion Calculator</h3>
    <div>
    <p><input type="radio" ng-model="convert" value="Celsius">Celsius to Fahrenheit</p>
    <p><input type="radio" ng-model="convert" value="fahranheit">Fahrenheit to Celsius</p>
    <div>
        <div ng-show="convert=='Celsius'">
            <p>Celsious : <input type="text" ng-model="cel"></p>
            <p>Faranheat : <input type="text" value=></p>
        </div>
    </div>
    <div>
        <div ng-show="convert=='fahranheit'" >
            <p>Faranheat : <input type="text" ng-model="fah"></p>
            <p>Celsious : <input type="text" value=></p>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</head>
</html>

Schogini's customer service extends beyond the natural boundaries. ~ Timothy Johnson

Schogini assures 24x7 - 6 hour turn around ticket response time and 24 hour Email response time (support@schogini.com)