Angularjs Examples

AJS Examples


AngularJS Expressions

In AngularJS, expression notation {{}} are used to bind data from model to HTML DOM elements and similar to ng-bind directive. Expression allow you to use variable (primitive and object), operators and literals as well. Contains inside {{ expression }} are executed in the context of the scope.

Syntax

<script>
<p> {{ expression }} </p>
</script>

AngularJS Expressions Example

<html>
<head>
<title>My first AngularJS Expression code</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
</head>
<body>
<div ng-app="">
<h3> Expression: {{ 10 + 100 }} </h3>
</div>
</body>
</html>
See Live Example

AngularJS Number Example

<html>
<head>
<title>My first AngularJS Expression code</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
</head>
<body>
<div ng-app=''>
    <div ng-init="num1=10;num2=20">
        Expression Result: {{ num1 + num2 }}  </br>
		<div ng-bind="num1 * num2">
    </div>
</div>
</body>
</html>
See Live Example

AngularJS String Example

<html>
<head>
<title>My first AngularJS Expression code</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
</head>
<body>
<div ng-app=''>
    <div ng-init="name='Jimi Scott'">
        Expression Result: {{ name }}
    </div>
</div>
</body>
</html>
See Live Example

AngularJS Object Example

<html>
<head>
<title>My first AngularJS Expression code</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
</head>
<body>
<div ng-app=''>
<div ng-init="customer={ name:'Jimi Scott', 
address:'12-13-283/A1', email:'[email protected]'}">
	Expression Result: {{ customer.name + "   " +
	customer.address + "  " + customer.email }}
</div>
</div>
</body>
</html>
See Live Example