AngularJS Expressions

AngularJS Expressions

Expressions are used to bind application data to HTML. Expressions are written inside double curly braces such as in {{ expression}}. Expressions behave similar to ng-bind directives. AngularJS expressions are pure JavaScript expressions and output the data where they are used.

Using numbers

<p>Expense on Books : {{cost * quantity}} Rs</p>

Using String

<p>Hello {{student.firstname + " " +student.lastname}}!</p>

Using Object

<p>Roll No: {{student.rollno}}</p>

Using Array

<p>Marks(Math): {{marks[3]}}</p>

Example

The following example shows the use of all the above-mentioned expressions:

testAngularJS.htm

<html>

<title>AngularJS Expressions</title>

<body>

<h1>Sample Application</h1>

<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'Mahesh',lastname:'Parashar',rollno:101};marks=[80,90,75,73,60]">

   <p>Hello {{student.firstname + " " + student.lastname}}!</p>  

   <p>Expense on Books : {{cost * quantity}} Rs</p>

   <p>Roll No: {{student.rollno}}</p>

   <p>Marks(Math): {{marks[3]}}</p>

</div>

<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>

</html>

Output

Open the file testAngularJS.htm in a web browser and see the result.

AngularJS Expressions

ليست هناك تعليقات:

إرسال تعليق