English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS Basic Tutorial

AngularJS Expressions

AngularJS expressions are used to bind application data to HTML. Expressions are written inside double curly braces, such as {{expression}}. The behavior of expressions is similar to the ngBind directive. AngularJS expressions are pure JavaScript expressions and output data at the location where they are used.

Using numbers

<p>Expense on Books: {{cost　*　quantity}} Rs</p>

Using strings

<p>Hello {{student.firstname　+　"　+　student.lastname}}!/p>

Using objects

<p>Roll No: {{student.rollno}}</p>

Using arrays

<p>Marks(Math): {{marks[3]}}</p>

Example

The following examples demonstrate the use of all the aforementioned expressions-

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>AngularJS expressions</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h1>Sample Application</h1>
　　　　　　
　　　　　　<div 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>
　　　　　　</div>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>
Test and See‹/›

Output Results

Open the file in a web browsertestAngularJS.htmand view the results.

AngularJS ControllersAngularJS Directives