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 条评论
登录 后参与评论

相关文章

来自专栏猿人谷

设计模式分类

     在《设计模式》这本书中列举并描述了23种设计模式,分为创建型模式、结构型模式和行为型模式。另外,近来这一清单又增加了一些类别,例如,并发型模式、线程池...

1855
来自专栏老马寒门IT

03Vue.js快速入门-Vue列表渲染及条件渲染实战

有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作。最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据。如果有数据就显示表格数据。 Vue...

20810
来自专栏猿人谷

linux时间相关结构体和函数整理

一、时间类型。Linux下常用的时间类型有4个:time_t,struct timeb, struct timeval,struct timespec,cloc...

1905
来自专栏微服务生态

淘宝Tedis组件究竟是个啥(一)

淘宝的Tedis组件究竟是个啥呢?可能有一些朋友没有听过这个名字,有一些朋友会经常使用,那么今天我就来和大家深入分析一下,它的使用和原理。

722
来自专栏漫漫深度学习路

pytorch学习笔记(十四): DataLoader源码阅读

pytorch 数据加载部分的 接口可以说是现存 深度学习框架中设计的最好的, 给了我们足够的灵活性。本博文就对 pytorch 的多线程加载 模块(Data...

8947
来自专栏进击的程序猿

raft 系列解读(3) 之 代码实现最小规则followercandidateleader规则RequestVote RPCAppendEntries RPC

首先,其实raft如果你不去看理论正确性的证明,光实现的话,只要按照raft里面给出的原则写代码就ok!如果代码写出来不正确,只能是你自己实现的问题。囧

592
来自专栏菜鸟计划

vue计算属性详解——小白速会

一、什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: <div id="exam...

3326
来自专栏编程

Go中defer的5 个坑-第一部分

首发于:https://studygolang.com/articles/12061 Go 中 defer 的 5 个坑 - 第一部分 通过本节的学习以避免掉入...

2165
来自专栏Play & Scala 技术分享

挑逗 Java 程序员的那些 Scala 绝技

有个问题一直困扰着 Scala 社区,为什么一些 Java 开发者将 Scala 捧到了天上,认为它是来自上帝之吻的完美语言;而另外一些 Java 开发者却对它...

1196
来自专栏LIN_ZONE

Vue(MVVM)、React(MVVM)、Angular(MVC)对比

昨天阿里内推电面一面,面试官了解到项目中用过Vue,就问为什么前端框架使用Vue而不适用其他的框架,当时就懵了。因为只用过Vue,不了解其他两个框架,今天就赶紧...

2302

扫码关注云+社区