专栏首页强仔仔AngularJS系列之表达式

AngularJS系列之表达式

这节介绍一下AngularJS中表示式的用法。使用表达式可以把数据绑定到HTML中去,使用起来非常方便。不过在使用之前得先引用AngularJS文件,这个文件可以去官网上面去下或者百度都可以找到。

下面就来介绍一下这节的具体内容:

AngularJS 表达式

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

AngularJS 表达式把数据绑定到 HTML。

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

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

现在已经知道表示式的基本用法了,下面写个例子来介绍一下AngularJS表达式具体的用法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="">
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
</body>
</html>

这里先不介绍ng-app是什么东西,有什么作用,只要知道在div上面写上ng-app就表示这个div是可以使用AngularJS中的任何用法的,否则就是无效的。

这里输出的结果和大家猜测的是一样的:也就是10。有人会问为什么输出的不是字符串“5+5”呢?这正是AngularJS表达式的厉害之处,它可以自动识别表达式中的数据类型,然后给出它相应的运算规则。 下面先来介绍一下ng-init的作用:ng-init的作用是给给定的参数赋初始值,然后我们就可以在表达式中用到这些值了。这些值的类型可以是:字符串、数字、对象、数组等等之类的。

下面就结合ng-init和表达式来具体的给一个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div>
</body>
</html>

这个例子中就是利用了ng-init中的初始值,然后在表达式中运算,最后得到新的的结果展示在HTML中来。到目前为止,大家应该可以理解ng-init和表达式的基本用法了吧。

下面再给出一些不同的例子来加深一下映象:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div>
</body>
</html>

这个例子是字符串连接的例子,从里面可以明显的看出结果是:John Doe。利用表达式实现字符串连接是不是特别方便。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>
</body>
</html>

这个例子是对象调用的例子,从里面也可以很明显的看出结果是:Doe。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div>
</body>
</html>

这个例子是典型的数组使用例子,和js中的数组下标是一样的,所以points【2】的值是:19。

例子现在就讲这些,相信大家已经基本了解了ng-init和表达式{{}}的一些常用的用法吧。

这里有一些主要事项需要大家注意一下,那就是:

AngularJS 表达式 与 JavaScript 表达式

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

与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。

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

与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

本文的内容借鉴Angular JS中的官方API和菜鸟教程中的Angular JS教程,大家如果想了解更多的话可以前往。

如对内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码

    今天给大家介绍一下怎样利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码的功能。 其实主要注意几点细节就可以轻松实现这样的功能了,第...

    林老师带你学编程
  • Java基础知识-基本数据类型相互转型

    这是我第一次系统性的总结java这门语言的基础知识用法,因本人经验有限,所以在总结的过程中如果有错误或者有歧义等等之类的问题,都可以联系我QQ:20801753...

    林老师带你学编程
  • 通过AOP和自定义注解实现请求日志收集功能

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    林老师带你学编程
  • 模板语法的简单实现

    模板语法允许在HTML中之插入Js变量以及表达式,当在Js中控制render的时候能够自动在页面上将变量或者是表达式进行计算并显示,比较常见的模板语法有must...

    WindrunnerMax
  • 如何分析产品的用户体验?(课程笔记)

    http://www.kickerstudio.com/2011/07/introducing-the-kicker-tea-tumbler/

    宇相
  • 简单模板模式

    简单模板模式是通过格式化字符串拼接出视图避免创建视图时大量的节点操作,简单模板模式不属于通常定义的设计模式范畴。

    WindrunnerMax
  • 毕业设计,步进电机解魔方机器人

    http://v.youku.com/v_show/id_XMTU4NjYxNjA1Ng

    zqb_all
  • BDTC 2017 | 十位资深专家分享金融大数据的实践和成果

    12月7-9日,由中国计算机学会主办,CCF 大数据专家委员会承办,的2017中国大数据技术大会(BDTC 2017),在北京新云南皇冠假日酒店隆重举行。本次大...

    挖掘大数据
  • “hdfs dfs -ls”命令的使用

    “hdfs dfs -ls”带一个参数,如果参数以“hdfs://URI”打头表示访问HDFS,否则相当于ls。 其中URI为NameNode的IP或主机...

    一见
  • SQL查询提速秘诀,避免锁死数据库的数据库代码

    由于数据库领域仍相对不成熟,每个平台上的 SQL 开发人员都在苦苦挣扎,一次又一次犯同样的错误。当然,数据库厂商在取得一些进展,并继续在竭力处理较重大的问题。

    数据和云

扫码关注云+社区

领取腾讯云代金券