AngularJS基础学习笔记之表达式
AngularJS通过表达式将数据绑定到HTML。
AngularJS表达式
AngularJS表达式写在双大括号中：{{ 表达式语句 }}。
AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。
AngularJS会准确地将表达式“输出”为计算的结果。
AngularJS表达式与JavaScript表达式有许多相似之处，它们都包含文字、运算符和变量。例如{{ 5 + 5 }}和{{ firstName + " " + lastName }}
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
如果你去掉ng-app指令，表达式会被直接显示在页面上而不会被计算。
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS数字
AngularJS数字和JavaScript数字一样：
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
同样，我们可以使用ng-bind指令达到相同的效果：
<div ng-app="" ng-init="quantity=1;cost=5"> <p>Total in dollar: <span ng-bind="quantity * cost"></span></p> </div>
Note 使用ng-init指令在AngularJS开发中非常普遍。在控制器一节中你将会看到更好的初始化数据的方法。
AngularJS字符串
AngularJS字符串与JavaScript字符串一样：
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
同样，我们可以使用ng-bind指令达到相同的效果：
<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p> </div>
AngularJS对象
AngularJS对象与JavaScript对象一样：
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
同样，我们可以使用ng-bind指令达到相同的效果：
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
AngularJS数组
AngularJS数组与JavaScript数组一样：
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
同样，我们可以使用ng-bind指令达到相同的效果：
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third result is <span ng-bind="points[2]"></span></p> </div>
AngularJS表达式与JavaScript表达式比较
与JavaScript表达式相同，AngularJS表达式也包含文字、运算符和变量。与JavaScript表达式不同的是，
AngularJS表达式可以写在HTML里面。
AngularJS表达式不支持条件和循环语句，而且没有exception语句。
AngularJS表达式支持过滤器。
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关推荐
-
AngularJS入门教程之AngularJS表达式
表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. AngularJS表达式格式 : {{expression }} AngularJS表达式可以是字符串.数字.运算符和变量 数字运算{{1 + 5}} 字符串连接{{ 'abc' + 'bcd' }} 变量运算 {{ firstName + " " + lastName }}
-
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表达式讲解及示例代码
表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. 使用数字 <p>Expense on Books : {{cost * quantity}} Rs</p> 使用字符串 <p>Hello {{student.firstname + " " + student.lastname}}!<
-
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解决ng界面长表达式(ui-set)的方法分析
本文实例讲述了AngularJS解决ng界面长表达式(ui-set)的方法.分享给大家供大家参考,具体如下: 本文来自网友sun shine的问题,问题如下: 您好, 我想求教一个问题. 在$scope中我的对象名字写的特别深, 在 html中我又多次用到了同一个对象, 对不对在 html中让它绑定到一个临时变量呢? 比如: $scope.this.is.a.very.deep.obj = { 'name': 'xxx', 'state': 'active
-
AngularJS 表达式详细讲解及实例代码
AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式写在双大括号内: {{ expression }} . AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. AngularJS 将在表达式书写的位置"输出"数据. AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字.运算符和变量. 实例 {{ 5 + 5 }} 或 {{ firstName + &quo
-
AngularJS实现DOM元素的显示与隐藏功能
本文实例讲述了AngularJS实现DOM元素的显示与隐藏功能.分享给大家供大家参考,具体如下: DOM元素的显示与隐藏 ,是前端开发中常常会用到的功能,AngularJS中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean. [HTML代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m
-
详解JavaScript的AngularJS框架中的表达式与指令
"指令属性"就是绑定在DOM元素上的函数,它可以调用方法.定义行为.绑定controller及$scope对象.操作DOM,等等等等. 当浏览器启动.开始解析HTML(像平时一样)时,DOM元素上的指令属性就会跟其他属性一样被解析. 当一个Angular.js应用启动,Angular编译器就会遍历DOM树(从有ng-app指令属性的那个DOM元素开始,如我们在本系列第一篇里所提过的),解析HTML,寻找这些指令属性函数. 当在一个DOM元素上找到一个或多个这样的指令属性函数,它们就会被
-
AngularJS 表达式详解及实例代码
前面了解了AngularJS的基本用法,这里就跟着PDF一起学习下表达式的相关内容. 在AngularJS中的表达式,与js中并不完全相同. 首先它的表达式要放在{{}}才能使用,其次相对于javascript中的表达式概念,它有以下几点不同: 1 作用域不同 在javascript中默认的作用于是window,但是在angularJs中就不同了.它使用$scope控制作用于. 2 允许未定义的值 在angularjs中,如果使用了未定义的表达式,也不会出现错误,直接返回空值. 3 过滤器 可以
-
详解AngularJS中的表达式使用
表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. 使用数字 <p>Expense on Books : {{cost * quantity}} Rs</p> 使用字符串 <p>Hello {{student.firstname + " " + student.lastname}}!<
-
AngularJS中实现显示或隐藏动画效果的方式总结
AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能.其中一项主要的特性就是Angular带来了对动画的支持. 本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-animage →依赖:var app = angular.module("app",["ngAnimate"]); →
-
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