How to use expressions in angularjs? Usage examples of angularjs expressions

本篇文章主要的向大家讲述了关于angularjs表达式的用法和angularjs的使用实例解释，最后还有AngularJS表达式与JavaScript表达式的区别。现在就让我们一起来看这篇文章吧

首先我们来了解下angularjs的表达式怎么用：

ng中的表达式与javascript表达式类似但是不可以划等号，它是ng自己定义的一套模式。表达式可以作为指令的值，如ng-modle=”people.name”、ng-click=”showMe()”，看起来是如此像字符串，故而也叫字符串表达式。也可以在标记中使用表达式，如{{1+2}}，或者与过滤器一起使用{{1+2 | currency}}。在框架内部，字符串不会简单的使用eval()来执行，而是有一个专门的$parse服务来处理。在ng表达式中不可以使用循环语句、判断语句，事实上在模板中使用复杂的表达式也是一个不推荐的做法，这样视图与逻辑就混杂在一起了

我们在使用其他模板库时，一般都会有模板的循环输出、分支输出、逻辑判断等类似的控制。

要想理解指令属性的运作，我们必须先理解表达式。在之前的例子里我们已经见过表达式，例如 {{ user.name }}。

{{ 8 + 1 }} 9
{{ person }} {"name":"Ari Lerner"}
{{ 10 * 3.3 | currency }} $33.00

表达式粗略来看有点像 eval(javascript) 的结果。它们会经过Angular.js的处理，从而拥有以下重要而独特的性质：

所有表达式都在scope这个context里被执行，因此可以使用所有本地 $scope 中的变量。

如果一个表达式的执行导致类型错误或引用错误，这些错误将不会被抛出。

表达式里不允许任何控制函数流程的功能（如if/else等条件语句）

表达式可接受一个或多个串联起来的过滤器。（想要看更多关于angularjs的视频，就到PHP中文网AngularJS视频教程栏目学习，里面有你想要的学习视频）

现在来看看angularjs表达式的使用实例：

• AngularJS 表达式写在双大括号内：{{ expression }}。

• AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

• AngularJS 将在表达式书写的位置"输出"数据。

• AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

一.AngularJS 数字

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

初始化参数，并通过ng-bind\表达式绑定并运用数字公式进行计算.

二.AngularJS 字符串

这种形式依然可以用两种方式进行绑定数据:

1.表达式绑定。2.利用ng-bind进行绑定。

例如：

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

三.我们来看看AngularJS对象：

AngularJS 对象就像 JavaScript 对象：

两种方式绑定：

1.表达式：

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

2.ng-bind绑定

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

AngularJS 数组就像 JavaScript 数组：

两种方式：

1.表达式：

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

2.ng-bind绑定：

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

AngularJS 表达式 与 JavaScript 表达式的区别：

1. 类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

2. 与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

3. 与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

4. 与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

好了，以上就是本篇关于angularjs表达式使用的文章了（想看更多就到PHP中文网，那里有AngularJS参考手册，可以供大家学习参考），希望对大家有帮助，有问题的可以在下方提问。

【小编推荐】

angularjs过滤器怎么使用？angularjs过滤器使用方法介绍

angularjs的路由原理你知道吗？这里有angularjs路由的详细原理

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