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

AngularJS 表达式

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

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

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

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

<!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>
<div ng-app="" ng-init="quantity=1;cost=5">

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

</div>

AngularJS 对象

AngularJS 对象就像 JavaScript 对象:

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

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

</div>

AngularJS 数组

AngularJS 数组就像 JavaScript 数组:

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

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

</div>

AngularJS 表达式 与 JavaScript 表达式

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

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

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

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

AngularJS学习篇(一)的更多相关文章

  1. AngularJS学习篇(二十四)

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  2. AngularJS学习篇(二十三)

    AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...

  3. AngularJS学习篇(二十二)

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  4. AngularJS学习篇(二十一)

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...

  5. AngularJS学习篇(二十)

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

  6. AngularJS学习篇(十九)

    AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...

  7. AngularJS学习篇(十八)

    AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...

  8. AngularJS学习篇(十七)

    AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/an ...

  9. AngularJS学习篇(十六)

    AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...

  10. AngularJS学习篇(十五)

    AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular. ...

随机推荐

  1. textarea文本域值中含有大量\t\n问题

    最近在发现了一个问题,很是头疼,textarea值中有大量的制表符,尝试了很多办法,最终找到了解决办法,希望能帮到同样有此困扰的你. <textarea> <c:out value= ...

  2. Raspiberry Camera详解+picamera库+Opencv控制

    使用树莓派的摄像头,将树莓派自身提供的picamera的API数据转换为Python Oencv可用图像数据: # import the necessary packages from picamer ...

  3. Visual Studio + Qt开发环境搭建

    1. 安装Visual Studio 2015 Visual Studio 2015下载地址如下,安装比较常规,不做介绍. Visual Studio Enterprise 2015 with Upd ...

  4. 初识 JShell

    Java9 现在吵得热火朝天,赶紧顺势学习一波喽! JDK9 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk9-dow ...

  5. 变量的声明和定义以及extern的用法

    变量的声明和定义以及extern的用法                                          变量的声明不同于变量的定义,这一点往往容易让人混淆. l         变量 ...

  6. Permutations 好题

    Permutations Time Limit: 20000/10000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Subm ...

  7. Ubuntu访问window下的磁盘分区出现“Error mounting /dev/sda5 at/media”错误的解决方法

    我装ubuntu之前,电脑上安装了windows 10,为了装ubuntu,在window 10下的磁盘工具分配了30G的磁盘空间.安装完Ubuntu之后,访问window 10的磁盘分区出现“Err ...

  8. 编写 WPF DataGrid 列模板,实现更好的用户体验

    Julie Lerman 下载代码示例 最近我在为一个客户做一些 Windows Presentation Foundation (WPF) 方面的工作. 虽然我提倡使用第三方工具,但有时也会避免使用 ...

  9. springboot kafka集成(实现producer和consumer)

    本文介绍如何在springboot项目中集成kafka收发message. 1.先解决依赖 springboot相关的依赖我们就不提了,和kafka相关的只依赖一个spring-kafka集成包 &l ...

  10. (10.11)Java第一小步

    在度过大一和大二浑浑噩噩的咸鱼生活之后,我决定 开始为自己的未来负责,开始学习自己喜欢的Java,同时决定以这篇博客来开启自己的博客之旅和Jaca的学习之路. 以后我也会陆续在博客园更新自己的博客,记 ...