首页 > web前端 > js教程 > angularjs的表达式怎么用?angularjs的表达式的使用实例

angularjs的表达式怎么用?angularjs的表达式的使用实例

寻∝梦
发布: 2018-09-06 16:44:49
原创
1541 人浏览过

本篇文章主要的向大家讲述了关于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路由的详细原理

以上是angularjs的表达式怎么用?angularjs的表达式的使用实例的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
js
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板