AngularJS 学习笔记(2) AngularJS 表达式

转载 2015年11月20日 15:45:06

AngularJS 表达式


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


AngularJS 表达式

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

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

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

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

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


AngularJS 数字

AngularJS 数字就像 JavaScript 数字:

AngularJS 实例

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总价: {{ quantity * cost }}</p>

</div>


使用 ng-bind 的相同实例:

AngularJS 实例

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总价: <span ng-bind="quantity * cost"></span></p>

</div>


Note 使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串:

AngularJS 实例

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>姓名: {{ firstName + " " + lastName }}</p>

</div>

使用 ng-bind 的相同实例:

AngularJS 实例

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

尝试一下 »


AngularJS 对象

AngularJS 对象就像 JavaScript 对象:

AngularJS 实例

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 {{ person.lastName }}</p>

</div>

使用 ng-bind 的相同实例:

AngularJS 实例

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 <span ng-bind="person.lastName"></span></p>

</div>

尝试一下 »


AngularJS 数组

AngularJS 数组就像 JavaScript 数组:

AngularJS 实例

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 {{ points[2] }}</p>

</div>

使用 ng-bind 的相同实例:

AngularJS 实例

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 <span ng-bind="points[2]"></span></p>

</div>


AngularJS 表达式 与 JavaScript 表达式

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

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

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

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

AngularJS系列之表达式

这节介绍一下angular js中表示式的用法。使用表达式可以把数据绑定到HTML中去,使用起来非常方便。 下面就来介绍一下这节的具体内容: AngularJS 表达式 AngularJS 表...
  • linzhiqiang0316
  • linzhiqiang0316
  • 2016年09月06日 20:34
  • 689

Angularjs 学习笔记(一)基础

1.简介: Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 Ang...
  • qq_25178609
  • qq_25178609
  • 2016年10月02日 16:13
  • 518

AngularJS之表达式

1、问题背景     表达式分为:(1)直接计算的加减乘除(2)利用变量实现的加减乘除(3)字符串表达式(4)对象表达式(5)数组表达式2、实现源码 AngularJS之表达式 ...
  • you23hai45
  • you23hai45
  • 2016年08月08日 19:24
  • 1123

angularjs页面显示表达式问题

在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: {{text}} 另一种是使用基于属性的指令,叫做ng-bind:     这两种方式的效果都是一样的,其...
  • xiaocen99
  • xiaocen99
  • 2015年11月06日 16:58
  • 532

AngularJS input number 保留两位小数

在网上查询了好多说用step="0.01" 不能够满足ng-model 绑定的值 后来找到了currency-format="number"     可以保留三位小数 也算可以满足需求...
  • u013914393
  • u013914393
  • 2016年05月31日 10:45
  • 10349

解析AngularJS表达式

尽管AngularJS会在运行$digest循环的过程中自动解析表达式,但有时手动解析表达式也是 非常有用的。AngularJS通过$parse这个内部服务来进行表达式的运算,这个服务能够访问当前所...
  • qq_29678299
  • qq_29678299
  • 2016年04月10日 00:13
  • 1023

AngularJS入门(3)-Angular表达式

AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML。 AngularJS 表达式写在双大括号内:{{ expression }}。AngularJS 表达式把...
  • zmx729618
  • zmx729618
  • 2016年11月02日 17:29
  • 766

Angularjs表达式与JavaScript表达式的区别

ng的表达式除了下面几点之外非常类似于js表达式 执行环境。js表达式的执行环境是在全局作用域中,即window对象。ng表达式的执行环境则是在一个scope对象中执行。Forgiving(报错...
  • Jax2000
  • Jax2000
  • 2016年03月02日 19:46
  • 1074

AngularJS运算表达式

HTML正文: quantity:{{quantity}} 插值表达式等价于:
  • yang1464657625
  • yang1464657625
  • 2017年01月08日 23:44
  • 953

angularjs 表达式与ng-bind

AngularJS 表达式写在双大括号内:{{ expression }}。 AngularJS 将在表达式书写的位置”输出”数据。 AngularJS 表达式 很像 JavaScript 表达式...
  • sinat_31057219
  • sinat_31057219
  • 2017年02月24日 10:59
  • 530
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS 学习笔记(2) AngularJS 表达式
举报原因:
原因补充:

(最多只允许输入30个字)