AngularJS Examples 2

Be sure to check out AngularJS for the full demonstration, explanations, and examples.

Interpolation Directive

This uses the handle bars or double curly braces to display an expression from a JavaScript function: Hello {{helloTo.title}} !

This can also evaluate expressions: Add 5+7 = {{5+7}}

And even display information not from the HTML: {{myData.textf()}}

ng-repeat Directive

This loops through a collection and generates HTML for each element

  1. {{theItem.text}}

This is powerful because using the dot notation you can iterate over the properties of the array

AngularJS $scope Hierarchy

Both of the variables below have the same variable name and property:


However since they belong to different controllers their values are different because their scopes are different

AngularJS Event Listener

Similar to JQuery, AngularJS can call a function after an event. In this example, a mouse click will trigger an alert:

Click here

AngularJS $watch() , $digest() and $apply()

This example demonstrates how Angular watches for changes in the variable and then applies the changes using the digest function:

{{data.time | date:'medium'}}

The complete explanation

Binding Select Boxes

This example demonstrates two-way binding of a JavaScript array