Expressions in AngularJS

Angular JS expressions are written using {{ }} brackets or inside ng-bind. Let us continue from the previous example at

To begin with we shall copy the official definition of Angular JS from its official site. AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language an?

 


<!DOCTYPE html>
<html>
<head>
<title>Simple AngularJS Expressions</title>
<link href="css/w3css.css" rel="stylesheet"/>
<script src="scripts/angular.js"></script>
</head>
<body ng-app="" class="w3-row-padding w3-card">

<div class="w3-row-padding w3-orange w3-margin">

<h2>N1</h2>
<p>Data: <input type="text" class="w3-padding" ng-model="n1"></p>

&nbsp;

</div>

<div class="w3-row-padding w3-orange w3-margin">

<h2>N2</h2>
<p>Data: <input type="text" class="w3-padding" ng-model="n2"></p>

&nbsp;

</div>

<div class="w3-row-padding w3-orange w3-margin">

<div class="w3-col s2">
<p ng-bind="n1"></p>
</div>
<div class="w3-col s2">
<p>+</p>
</div>
<div class="w3-col s2">
<p ng-bind="n2"></p>
</div>
<div class="w3-col s2">
<p>=</p>
</div>
<div class="w3-col s4">
<p> {{ n1*1 + n2*1 }}</p>
</div>
</div>
</body>
</html>

 

 

Notice the NaN in the output when numbers are not being give.


<!DOCTYPE html>
<html>
<head>
<title>Simple AngularJS Expressions with Init</title>
<link href="css/w3css.css" rel="stylesheet"/>
<script src="scripts/angular.js"></script>
</head>
<body ng-app="" class="w3-row-padding w3-card" ng-init="n1='0';n2='0'">

<div class="w3-row-padding w3-orange w3-margin">

<h2>N1</h2>
<p>Data: <input type="text" class="w3-padding" ng-model="n1"></p>

&nbsp;

</div>

<div class="w3-row-padding w3-orange w3-margin">

<h2>N2</h2>
<p>Data: <input type="text" class="w3-padding" ng-model="n2"></p>

&nbsp;

</div>

<div class="w3-row-padding w3-orange w3-margin">

<div class="w3-col s2">
<p ng-bind="n1"></p>
</div>
<div class="w3-col s2">
<p>+</p>
</div>
<div class="w3-col s2">
<p ng-bind="n2"></p>
</div>
<div class="w3-col s2">
<p>=</p>
</div>
<div class="w3-col s4">
<p> {{ n1*1 + n2*1 }}</p>
</div>
</div>
</body>
</html>

&nbsp;

 

 

 

 

Leave a Reply