AngularJS Expressions:
AngularJS expressions binds application data to HTML. AngularJS expressions can be written either inside double braces {{ expression }} or inside a directive ng-bind=”expression”. AngularJS expressions are like javascript expressions and outputs the result where they are used.
Example Explanation:
First include the AngularJS library in the application. The ng-app directive initializes the application. Then we use ng-init dicrective to initialize variables (quantity and cost), object (student) and array (marks). In first expression we concatenate firstname and lastname of student object. In second expression we multiply quantity and cost to get total expenses. In third expression we are displaying rollno from student object. In last expression we get the marks of a specific subject from marks array. All expressions will execute and outputs the result where they are used.
Example:
<html> <head> <title>AngularJS Expressions Example</title> </head> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> <body> <h1>AngularJS Expressions Example</h1> <div ng-app = "" ng-init = "quantity = 2;cost= 250; student = {firstname:'Jai',lastname:'Singh',rollno:6}; marks = [90,85,85,77,70]"> <p>Hello {{student.firstname + " " + student.lastname}}!</p> <p>Expense on Books: {{cost * quantity}} Rs</p> <p>Roll No: {{student.rollno}}</p> <p>Marks(Java): {{marks[2]}}</p> </div> </body> </html> |
Try it:
AngularJS Expressions Example on jsbin.com
