【AngularJS】—— 4 表达式
前面了解了AngularJS的基本用法，这里就跟着PDF一起学习下表达式的相关内容。
在AngularJS中的表达式，与js中并不完全相同。
首先它的表达式要放在{{}}才能使用，其次相对于javascript中的表达式概念，它有以下几点不同：
1 作用域不同
在javascript中默认的作用于是window，但是在angularJs中就不同了。它使用$scope控制作用于。
2 允许未定义的值
在angularjs中，如果使用了未定义的表达式，也不会出现错误，直接返回空值。
3 过滤器
可以在表达式中使用 | 管道命令符，添加过滤器，与UNIX的命令行类似。
4 $符号
用以区别angular的方法与用户自定义的方法。
下面看一段小代码：
<!doctype html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctl">
name:<input ng-model="name" type="text">
<button ng-click="reset()">reset</button>
<br>
{{name}}
<br>
hello ! {{test}}
<br>
filter : {{name | uppercase}}
</div>
<script type="text/javascript">
function ctl($scope){
var str = "init";
$scope.name = str; $scope.reset = function(){
$scope.name = str;
}
}
</script>
</body>
</html>
通过reset触发reset方法，重置name变量的内容；
在表达式中，引用了未定义的test，但是并没有报错，直接默认显示为空；—— {{test}}
最后使用过滤器，将表达式中name的值转化成大写。—— {{name | uppercase}}
运行结果：
【AngularJS】—— 4 表达式的更多相关文章
- AngularJS的表达式、指令的学习（2）
最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...
- AngularJS：表达式
ylbtech-AngularJS:表达式 1.返回顶部 1. AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS ...
- angularjs之表达式
一:angularjs表达式的解析 angularjs会在运行$digest循环中自动解析表达式,但有时手动解析表达式也是非常用用的. angularjs通过$parse这个内部服务来进行表达式的运算 ...
- Angularjs –– Expressions(表达式)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Angular的表达式 Angular的表达式和JavaScript代码很像,不过通常A ...
- AngularJs解决表达式闪烁的问题（ng-cloak）
举例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- AngularJS表达式
1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...
- AngularJS 简介、指令、表达式
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...
- AngularJS快速入门指南03：表达式
AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...
- AngularJS 表达式 对象和数组
AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑 ...
- angularJS表达式详解！
angularJS的表达式很像Javascript里的表达式:它可以包含文字,运算符和变量: angularJS 表达式: - 数字:{{100+100}} - 字符串:{{‘hello’+'angu ...
随机推荐
- NetLink Communication Mechanism And Netlink Sourcecode Analysis
catalog . Netlink简介 . Netlink Function API Howto . Generic Netlink HOWTO kernel API . RFC Linux Netl ...
- waf2控件名
1,查询表格(queryGrid),编辑表格(editGrid) wafGrid 2,快速F7 wafPromptQuick 3,表格F7 wafPromptGrid 4,自定义F7 wafPromp ...
- iOS Keychain钥匙串，应用间数据共享打造iOS上的全家桶
Demo先行:https://github.com/rayshen/GIKeychainGroupDemo 该demo里有2个工程,你先运行任何一个会存储一个值,再运行另一个会访问之前的app存储的值 ...
- 几个容易被忽略的mysql知识
为什么标题要起这个名字呢?commen sence指的是那些大家都应该知道的事情,但往往大家又会会略这些东西,或者对这些东西一知半解,今天我总结下自己在mysql中遇到的一些commen sense类 ...
- 对iOS中Delegate的理解
首先 协议protocol 和委托delegate 是两个完全不同的概念 放在一起说 是因为我们总是在同一个头文件里看到它们: 首先解释一下什么是委托 :举个例子 ,我工作的时候给你打电话,让你帮我 ...
- python编码
一.编码 常见的编码比较: ascii:1个字节 unicode:2个字节 utf-8:英文1个字节,汉字3个字节 二.一个编码问题 问:如下代码设置了在代码中添加了coding: utf-8,但是在 ...
- HBase与MongDB等NoSQL数据库对照
HBase概念学习(十)HBase与MongDB等NoSQL数据库对照 转载请注明出处: jiq•钦's technical Blog - 季义钦 一.开篇 淘宝之前使用的存储层架构一直是MySQL数 ...
- Yocto开发笔记之《驱动调试－华为3G模块》（QQ交流群：519230208）
QQ群:519230208,为避免广告骚扰,申请时请注明 “开发者” 字样 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 参考:ht ...
- bigdecimal类型数据的min方法
java.math.BigDecimal.min(BigDecimal val) 返回此BigDecimal和val的最小值. 声明 以下是java.math.BigDecimal.min()方法的声 ...
- IP-Address TextBox
http://www.codeproject.com/Articles/4693/IP-Address-TextBox 可以下载试用效果.个人感觉功能很强大,但输入时让人不太舒服.可以参考. ntro ...