Object Expressions in AngularJS with Example

Here we will learn what are the object expressions in angularjs and how to use object expressions in angularjs with example.

Object Expressions in AngularJS

The object expressions in angularjs basically hold object properties in them and the same way then evaluates at the view where they are used. We will see how to use object expressions in angularjs with example. 

Example of Object Expressions in AngularJS

Create or add a HTML page (say index.html) in your application. After adding index.html page add following sample code of angularjs object expressions in header section of your page. 

 

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

<script type="text/javascript">

var app = angular.module('expressionApp', [])

app.controller("expressionController", function ($scope) {

$scope.expression = {

key1: 'welcome',

key2: 'to',

key3: 'tutlane.com'

};

});

</script>

Write the following code under starting of body tag <body> for object expressions in angularjs like as shown below

 

<body ng-app="expressionApp">

<form id="form1">

<div ng-controller="expressionController">

<p>Pure JSON object conatins key value pairs as <br />

key1 : {{expression.key1}} <br /> key2 : {{expression.key2}} <br /> key3 : {{expression.key3}}</p>

</div>

</form>

</body>

Following is the full example code for object expressions in angularjs with live demo as show below

 

Live Preview

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Object Expressions in AngularJs</title>

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

<script type="text/javascript">

var app = angular.module('expressionApp', [])

app.controller("expressionController", function ($scope) {

$scope.expression = {

key1: 'welcome',

key2: 'to',

key3: 'tutlane.com'

};

});

</script>

</head>

<body ng-app="expressionApp">

<form id="form1">

<div ng-controller="expressionController">

<p>Pure JSON object conatins key value pairs as <br />

key1 : {{expression.key1}} <br /> key2 : {{expression.key2}} <br /> key3 : {{expression.key3}}</p>

</div>

</form>

</body>

</html>

If you observe above code we declared controller, app and binding value to $scope.expression. Now run above code of object expressions in angularjs example and check output that will be like as shown below

Output of AngularJS Object Expressions

Following is the output of angularjs object expressions example

 

Angularjs Object Expressions Example Output or Result