1. Home
  2. AngularJS expression

AngularJS expression

AngularJS use expressions to bind data to HTML.

AngularJS expression

AngularJS expressions written in curly brackets: {{expression}}.

AngularJS expression to bind the data to HTML, which ng-bind command has the same purpose.

AngularJS expression in the writing position "output" data.

AngularJS expressions like JavaScript expressions: they can contain text, operators, and variables.

Examples 5 + 5 {{}} or {{firstName + "" + lastName}}

AngularJS examples

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8 ">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>

<Div ng-app = "" >
<P> My first expression: {{5 + 5}} </ p>
</ Div>

</ Body>
</ Html>

AngularJS digital

AngularJS JavaScript digit numbers like:

AngularJS examples

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总价： {{ quantity * cost }}</p>

</div>

Use the same instance ng-bind:

AngularJS examples

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总价： <span ng-bind="quantity * cost"></span></p>

</div>

Note Use ng-init is not very common. You will learn to be a better way to initialize the data in the controller chapter.

AngularJS string

AngularJS JavaScript string string like:

AngularJS examples

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>姓名： {{ firstName + " " + lastName }}</p>

</div>

Use the same instance ng-bind:

AngularJS examples

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>


AngularJS objects

AngularJS objects like JavaScript objects:

AngularJS examples

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 {{ person.lastName }}</p>

</div>

Use the same instance ng-bind:

AngularJS examples

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 <span ng-bind="person.lastName"></span></p>

</div>


AngularJS array

AngularJS JavaScript array as an array:

AngularJS examples

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 {{ points[2] }}</p>

</div>

Use the same instance ng-bind:

AngularJS examples

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 <span ng-bind="points[2]"></span></p>

</div>

AngularJS JavaScript expression and expression

Similar to JavaScript expressions, AngularJS expressions can contain letters, operators, variables.

JavaScript with different expressions, AngularJS expression can be written in HTML.

JavaScript with different expressions, AngularJS expression does not support conditional, circulation and anomalies.

JavaScript expressions and different, AngularJS expression support filters.

Hot Tutorials

Contact US