AngularJS 表达式

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

AngularJS 表达式

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <div ng-app="">
  6. <p>我的第一个表达式：{{5+5}}</p>
  7. </div>
  9. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  11. </body>
  12. </html>
 
魔芋练习：
  1. <div class="moyu" ng-app="" ng-init="moyuName='mo'">
  2. <input class="ceshi" ng-model ="moyu" type="text">
  3. <span ng-bind="moyu"></span>
  4. <span>{{moyuName}}</span>
  5. </div>
 

AngularJS 数字

AngularJS 数字就像 JavaScript 数字：

  1. <div ng-app="" ng-init="quantity=1;cost=5">
  3. <p>总价：{{ quantity * cost }}</p>
  5. </div>
 

使用 ng-bind 的相同实例：

  1. <div ng-app="" ng-init="quantity=1;cost=5">
  3. <p>总价：<span ng-bind="quantity * cost"></span></p>
  5. </div>
 
  使用 ng-init 不是很常见。

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串：

  1. <div ng-app="" ng-init="firstName='John';lastName='Doe'">
  3. <p>姓名：{{ firstName +" "+ lastName }}</p>
  5. </div>
 

使用 ng-bind 的相同实例：

  1. <div ng-app="" ng-init="firstName='John';lastName='Doe'">
  3. <p>姓名：<span ng-bind="firstName + ' ' + lastName"></span></p>
  5. </div>
 

AngularJS 对象

AngularJS 对象就像 JavaScript 对象：

  1. <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
  3. <p>姓为{{ person.lastName }}</p>
  5. </div>
 

使用 ng-bind 的相同实例：

  1. <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
  3. <p>姓为<span ng-bind="person.lastName"></span></p>
  5. </div>
 

AngularJS 数组

AngularJS 数组就像 JavaScript 数组：

  1. <div ng-app="" ng-init="points=[1,15,19,2,40]">
  3. <p>第三个值为{{ points[2]}}</p>
  5. </div>
 

使用 ng-bind 的相同实例：

  1. <div ng-app="" ng-init="points=[1,15,19,2,40]">
  3. <p>第三个值为<span ng-bind="points[2]"></span></p>
  5. </div>
 

AngularJS 表达式 与 JavaScript 表达式

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

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。（魔芋：通过双括号｛｛｝｝）

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

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

【04】AngularJS 表达式的更多相关文章

  1. AngularJS表达式

    1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...

  2. AngularJS开发指南5：AngularJS表达式详解

    AngularJS表达式类似Javascript的代码片段,通常在数据绑定中用到,写在双大括号中,如:{{表达式}}.表达式是用$parse方法来处理的. 下面是一些合法的AngularJS表达式 1 ...

  3. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  4. AngularJS 表达式 对象和数组

    AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑 ...

  5. angularJS表达式详解！

    angularJS的表达式很像Javascript里的表达式:它可以包含文字,运算符和变量: angularJS 表达式: - 数字:{{100+100}} - 字符串:{{‘hello’+'angu ...

  6. 第一个AngularJS表达式实例

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. 32.AngularJS 表达式

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据 ...

  8. angularjs表达式中的HTML内容，如何不转义，直接表现为html元素

    在模板中直接: 在ionic中直接使用: <p class="contentwen" ng-bind-html="detial.content">& ...

  9. angularJS表达式和指令

    主要是描述angularJS如何扩展html的:(模型后面会涉及) 例子1:通过指令来扩展html <body ng-app="myapp">  <!--  ng ...

随机推荐

  1. ruby on rails, api only, 脚手架

    rails new connector_api --api --database=postgresql bundle install rake db:create rails g scaffold i ...

  2. linux中touch命令参数修改文件的时间戳（转载）

    转自:http://os.51cto.com/art/200908/144237.htm linux中touch命令参数不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存 ...

  3. bzoj 1774: [Usaco2009 Dec]Toll 过路费【排序+Floyd】

    非常迷的一道题啊 我觉得挺对的版本只得了30 总之就是Floyd·改,开两个数组,一个是d[i][j]就是普通的只有边权的最短路,a[i][j]是题目要求的那种 具体改的地方是把枚举中转点的地方把中转 ...

  4. 1617: [Usaco2008 Mar]River Crossing渡河问题(dp)

    1617: [Usaco2008 Mar]River Crossing渡河问题 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1219  Solved:  ...

  5. [App Store Connect帮助]六、测试 Beta 版本（3.3）管理测试员：查看测试员信息

    如果您使用“TestFlight Beta 版测试”,您可以查看关于测试员的信息,并衡量测试员的参与度. 必要职能:“帐户持有人”职能.“管理”职能.“App 管理”职能.“开发者”职能或“营销”职能 ...

  6. git stash 切换分支以后 恢复

    场景: 我在A分支开发 突然要去B分支改东西 但是A分支还没开发完 B又比较着急 又不想提交A 但是不提交又切换不到B 于是就发现有个git stash 将当前修改(未提交的代码)存入缓存区,切换分支 ...

  7. jenkins手把手教你从入门到放弃02-jenkins在Windows系统安装与配置（详解）

    简介 上一篇对jenkins有了大致了解之后,那么我们就开始来安装一下jenkins. Jenkins安装 一.安装Java环境 1.你需要做的第一件事情就是在你的机器上安装Java环境.Jenkin ...

  8. 最大化最小值poj2456Aggressive cows

    Aggressive cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15528   Accepted: 7440 ...

  9. Shape Drawable Resources

    1,示例 它们的代码如下: shape_oval.xml <?xml version="1.0" encoding="utf-8"?> <sh ...

  10. spring的依赖注入如何降低了耦合

    依赖注入:程序运行过程中,如需另一个对象协作(调用它的方法.访问他的属性时),无须在代码中创建被调用者,而是依赖于外部容器的注入 看过一些比较好的回答 1.一个人(Java实例,调用者)需要一把斧子( ...