AngularJS入门教程之AngularJS表达式

表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式，并输出它们被使用的数据在那里。

AngularJS表达式格式 : {{expression }}

AngularJS表达式可以是字符串、数字、运算符和变量

数字运算{{1 + 5}}

字符串连接{{ 'abc' + 'bcd' }}

变量运算 {{ firstName + " " + lastName }}， {{ quantity * cost }}

对象{{ person.lastName }}

数组{{ points[2] }}

AngularJS例子

1.Angularjs数字

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

上例输出：

总价：10

代码注释：

ng-init="quantity=2;cost=5" //相当于javascript里的var quantity=2,cost=5;
使用ng-bind可以实现相同的功能

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： <span ng-bind="quantity * cost"></span></p>
//这里的ng-bind相当于指定了span的innerHTML
</div>

2.Angularjs字符串

<div ng-app="" ng-init="firstName='John';lastName='Snow'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>

输出

姓名：Jone Snow

3. AngularJS对象

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

输出

姓为 Snow

4.AngularJS数组

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

输出

第三个值为 19

以上所述是小编给大家介绍的AngularJS入门教程之AngularJS表达式的相关介绍，希望对大家有所帮助！

赞 (0)

相关推荐

  • AngularJS 表达式详解及实例代码

    AngularJS 表达式详解及实例代码

    前面了解了AngularJS的基本用法,这里就跟着PDF一起学习下表达式的相关内容. 在AngularJS中的表达式,与js中并不完全相同. 首先它的表达式要放在{{}}才能使用,其次相对于javascript中的表达式概念,它有以下几点不同: 1 作用域不同 在javascript中默认的作用于是window,但是在angularJs中就不同了.它使用$scope控制作用于. 2 允许未定义的值 在angularjs中,如果使用了未定义的表达式,也不会出现错误,直接返回空值. 3 过滤器 可以

  • AngularJS解决ng界面长表达式(ui-set)的方法分析

    本文实例讲述了AngularJS解决ng界面长表达式(ui-set)的方法.分享给大家供大家参考,具体如下: 本文来自网友sun shine的问题,问题如下: 您好, 我想求教一个问题.     在$scope中我的对象名字写的特别深, 在 html中我又多次用到了同一个对象, 对不对在 html中让它绑定到一个临时变量呢?     比如:     $scope.this.is.a.very.deep.obj = {     'name': 'xxx',     'state': 'active

  • AngularJS实现DOM元素的显示与隐藏功能

    本文实例讲述了AngularJS实现DOM元素的显示与隐藏功能.分享给大家供大家参考,具体如下: DOM元素的显示与隐藏 ,是前端开发中常常会用到的功能,AngularJS中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean. [HTML代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m

  • AngularJS基础学习笔记之表达式

    AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同. AngularJS会准确地将表达式"输出"为计算的结果. AngularJS表达式与JavaScript表达式有许多相似之处,它们都包含文字.运算符和变量.例如{{ 5 + 5 }}和{{ firstName + " " + lastName

  • AngularJS 表达式详细讲解及实例代码

    AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式写在双大括号内: {{ expression }} . AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. AngularJS 将在表达式书写的位置"输出"数据. AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字.运算符和变量. 实例 {{ 5 + 5 }} 或 {{ firstName + &quo

  • AngularJS中实现显示或隐藏动画效果的方式总结

    AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能.其中一项主要的特性就是Angular带来了对动画的支持. 本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-animage →依赖:var app = angular.module("app",["ngAnimate"]); →

  • AngularJS实现元素显示和隐藏的几个案例

    AngularJS实现元素显示和隐藏的几个案例

    案例一:控制html元素显示和隐藏有n种方法:html的hidden.css的display.jquery的hide()和show().bootstrap的.hide.今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态.监听函数.if判断.选择dom.设置dom,5行代码搞不定吧,而且毫无技术含量. 看代码: <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8&qu

  • AngularJS打开页面隐藏显示表达式用法示例

    本文实例讲述了AngularJS打开页面隐藏显示表达式用法.分享给大家供大家参考,具体如下: 1.使用 ng-cloak, 同时要在css加入一行 [ng-cloak] {display: none;} 样式 [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 2.使用ng-bind, 代替{{}} 这个不太方便,因为使用ng-bin

  • Angularjs手动解析表达式（$parse）

    下面一段代码给大家介绍了angularjs手动解析表达式($parse),具体代码如下所示: <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title>手动解析表达式($parse)</title> <link rel="stylesheet&qu

  • 详解AngularJS中的表达式使用

    详解AngularJS中的表达式使用

    表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. 使用数字 <p>Expense on Books : {{cost * quantity}} Rs</p> 使用字符串 <p>Hello {{student.firstname + " " + student.lastname}}!<

  • AngularJS表达式讲解及示例代码

    AngularJS表达式讲解及示例代码

    表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. 使用数字 <p>Expense on Books : {{cost * quantity}} Rs</p> 使用字符串 <p>Hello {{student.firstname + " " + student.lastname}}!<

  • 详解JavaScript的AngularJS框架中的表达式与指令

    详解JavaScript的AngularJS框架中的表达式与指令

    "指令属性"就是绑定在DOM元素上的函数,它可以调用方法.定义行为.绑定controller及$scope对象.操作DOM,等等等等. 当浏览器启动.开始解析HTML(像平时一样)时,DOM元素上的指令属性就会跟其他属性一样被解析. 当一个Angular.js应用启动,Angular编译器就会遍历DOM树(从有ng-app指令属性的那个DOM元素开始,如我们在本系列第一篇里所提过的),解析HTML,寻找这些指令属性函数. 当在一个DOM元素上找到一个或多个这样的指令属性函数,它们就会被

随机推荐