How to use AngularJS expressions? Details on how to use expressions in angularjs

This article mainly introduces you to the use of expressions in angularjs, examples of the use of angularjs numbers, and the details of the use of angularjs strings, objects, and arrays. Now let’s take a look. This article

AngularJS uses expressions to bind data to HTML.

AngularJS expression

AngularJS expression is written in double curly brackets: {{ expression }}.

AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.

AngularJS will "output" data where the expression is written.

AngularJS expressions are much like JavaScript expressions: they can contain literals, operators, and variables.

Example {{ 5 5 }} or {{ firstName " " lastName }}

AngularJS numbers

AngularJS numbers are like JavaScript numbers:

<p ng-app="" ng-init="quantity=1;cost=5">
 <p>总价： {{ quantity * cost }}</p>
 </p>

Same example using ng-bind:

<p ng-app="" ng-init="quantity=1;cost=5">
 <p>总价： <span ng-bind="quantity * cost"></span></p>
 </p>

Using ng-init is not very common. You'll learn a better way to initialize data in the Controllers chapter.

AngularJS Strings

AngularJS strings are just like JavaScript strings:

<p ng-app="" ng-init="firstName=&#39;John&#39;;lastName=&#39;Doe&#39;">
<p>姓名： {{ firstName + " " + lastName }}</p>
</p>

Same instance using ng-bind:

<p ng-app="" ng-init="firstName=&#39;John&#39;;lastName=&#39;Doe&#39;">
 <p>姓名： <span ng-bind="firstName + &#39; &#39; + lastName"></span></p>
</p>

AngularJS Objects

AngularJS objects are like JavaScript objects:

<p ng-app="" ng-init="person={firstName:&#39;John&#39;,lastName:&#39;Doe&#39;}">
 <p>姓为 {{ person.lastName }}</p>
 </p>

*lastName, case sensitive (if you want to know more, go to the PHP Chinese website AngularJS Development Manual to learn)

The same instance using ng-bind:

<p ng-app="" ng-init="person={firstName:&#39;John&#39;,lastName:&#39;Doe&#39;}">
 <p>姓为 <span ng-bind="person.lastName"></span></p>
 </p>

AngularJS arrays

AngularJS arrays are just like JavaScript arrays:

<p ng-app="" ng-init="points=[1,15,19,2,40]">
 <p>第三个值为 {{ points[2] }}</p>
 </p>

The same instance using ng-bind:

<p ng-app="" ng-init="points=[1,15,19,2,40]">
 <p>第三个值为 <span ng-bind="points[2]"></span></p>
 </p>

AngularJS expressions and JavaScript expressions

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

Different from JavaScript expressions,

AngularJS expressions can be written in HTML

AngularJS expressions do not support conditional judgments, loops and exceptions.

AngularJS expressions support filters.
Okay, this article ends here (if you want to see more, go to the PHP Chinese website AngularJS User Manual to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How to use AngularJS expressions? Details on how to use expressions in angularjs. For more information, please follow other related articles on the PHP Chinese website!