English 中文(简体)
AngularJS Tutorial

AngularJS Applications

AngularJS Useful Resources

Selected Reading

AngularJS - Expressions
  • 时间：2024-12-22

AngularJS - Expressions

Previous Page Next Page  

Expressions are used to bind apppcation data to HTML. Expressions are written inside double curly braces such as in {{ expression}}. Expressions behave similar to ngbind 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 Strings

<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>
   <head>
      <title>AngularJS Expressions</title>
   </head>
   
   <body>
      <h1>Sample Apppcation</h1>
      
      <span 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>
      </span>
      
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Output

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