pTutorial

New way to learn Programming

AngularJS – Expressions

AngularJS – Expressions

Angular Expression are used to bind the directive data to HTML. Angular expression are putting inside the double braces.

For example

<input type="text" name ="name" ng-model="name">
{{name}}

Expressions are used to bind application data to html. Expressions are written inside double braces like {{ expression}}.

Expressions behaves in same way as ng-bind directives. You can use express in the place of ng-bind.

AngularJS application expressions are like JS expressions and put the data where they are used.

AngularJS addition Example

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="">
  <p>Simple Angular Expresion: {{ 38 + 2 }}</p>
</div>

</body>
</html>

AngularJS Multiplication Example

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="" ng-init="a=10; b=20;">
  <p>Simple Angular Expresion: {{ a*b }}</p>
</div>

</body>
</html>

AngularJS division Example

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="" ng-init="a=10; b=20;">
  <p>Simple Angular Expresion: {{ b/a }}</p>
</div>

</body>
</html>

AngularJS Sum Example

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="">
<h1>Calculate sum</h1>
<input type="number" ng-model="a">
<input type="number" ng-model="b">
  <p>Simple Angular Sum: {{a+b}}</p>
</div>

</body>
</html>

AngularJS Objects

AngularJS objects are like JavaScript objects so you can easily access via dot(.) operator

AngularJS Objects Example

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="" ng-init="student={Name:'Brown',RollNo:38}">
<p>The name is {{ student.Name }}</p>
<p>The Roll Number is {{ student.RollNo }}</p>
</div>
</body>
</html>

AngularJS Arrays

AngularJS arrays are like JavaScript arrays so you can easily access via index.

AngularJS Arrays Example

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=['uk','kk','khan','umar']">
<p>The third result is {{ names[2] }}</p>
</div>
</body>
</html>


Note: angular.min.js file must be in the same folder or use this url "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js but in this case internet must be connected."

See Also


QUOTES OF THE DAY

A single death is tragedy, a million death is a static.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER