search

Home >Web Front-end >JS Tutorial >Detailed explanation of expression usage in AngularJS_AngularJS

Detailed explanation of expression usage in AngularJS_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:54:41936browse

Expressions are used for application data binding to HTML. Expressions are written in double brackets like {{expression}}. The behavior in expressions is the same as the ng-bind directive. AngularJS application expressions are pure javascript expressions and output the data they are used in there.
Use numbers

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

Use string 

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

Use object

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

Use an array

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

Example

The following example will demonstrate all the above expressions.
The testAngularJS.html file code is as follows: 

<html>
<title>AngularJS Expressions</title>
<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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Output

Open textAngularJS.html in your web browser. See the results as follows:

2015616115757530.png (587×339)

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Explain the modules in AngularJS with examples_AngularJSNext article：Explain the modules in AngularJS with examples_AngularJS

Related articles

See more