AngularJS---表达式
AngularJS的表达式是放在{{}}里面，用{{ }}符号将一个变量绑定到$scope上。
angularJS中的表达式有如下特点：
1.只能在其所属作用域内部
所有的表达式都在其所属的作用域内部执行，并有访问本地$scope的权限。
2.允许未定义
在html中可以使用未在angularJS定义的变量，不会抛出异常
3.不能使用流控制
不能使用任何流控制包括条件语句，如if/else
4.过滤器
可以接收过滤器和过滤器链，使用 | 符号连接过滤器
请看小例子：
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="Controller">
<button ng-click="change()">change</button>
<br>
显示：{{ person }}
<br>
未显示{{undefine}}
<br>
过滤显示：{{person | uppercase}}
</div>
<script type="text/javascript">
function Controller($scope){
$scope.person = 'monkey';
$scope.change = function(){
$scope.person = 'cat';
}
}
</script>
</body>
</html>
自定义过滤器：
html文件：
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="Controller">
<button ng-click="change()">change</button>
<br>
显示：{{ person }}
<br>
未显示{{undefine}}
<br>
过滤显示（大写）：{{person | uppercase}}
<br>
过滤显示（首字母大写）：{{person | capitalize}}
<br>
过滤显示（首字母大写）：{{person | lowercase | capitalize}}
</div>
<script type="text/javascript" src="./app.js"></script>
</body>
</html>
app.js文件：
var app = angular.module("myApp",[]);
app.controller('Controller',function($scope){
$scope.person = 'monkey';
$scope.change = function(){
$scope.person = 'cat';
}
})
app.filter('capitalize',function(){
return function(input){ //input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
}
})
AngularJS---表达式的更多相关文章
- AngularJS表达式
1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...
- AngularJS开发指南5：AngularJS表达式详解
AngularJS表达式类似Javascript的代码片段,通常在数据绑定中用到,写在双大括号中,如:{{表达式}}.表达式是用$parse方法来处理的. 下面是一些合法的AngularJS表达式 1 ...
- AngularJS学习之旅—AngularJS 表达式(二)
1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...
- AngularJS 表达式 对象和数组
AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑 ...
- angularJS表达式详解！
angularJS的表达式很像Javascript里的表达式:它可以包含文字,运算符和变量: angularJS 表达式: - 数字:{{100+100}} - 字符串:{{‘hello’+'angu ...
- 第一个AngularJS表达式实例
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 【04】AngularJS 表达式
AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. Ang ...
- 32.AngularJS 表达式
转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据 ...
- angularjs表达式中的HTML内容，如何不转义，直接表现为html元素
在模板中直接: 在ionic中直接使用: <p class="contentwen" ng-bind-html="detial.content">& ...
- angularJS表达式和指令
主要是描述angularJS如何扩展html的:(模型后面会涉及) 例子1:通过指令来扩展html <body ng-app="myapp"> <!-- ng ...
随机推荐
- 关于IE9-解决background-size的问题
body{background:url("/branch/comm/images-new/login.jpg") no-repeat;background-size:100%;fi ...
- Drools环境搭建（转）
Eclipse3.5安装Drools5.2.0.Final插件 到Drools下载页面(现在是http://www.jboss.org/drools/downloads.html) -下载并解压Dro ...
- C# 处理应用程序减少内存占用
SetProcessWorkingSetSize减少内存占用 系统启动起来以后,内存占用越来越大,使用析构函数.GC.Collect什么的也不见效果,后来查了好久,找到了个办法,就是使用 SetPro ...
- IOS7.0 UILabel实现自适应高度的新方法
//IOS7.0中利用- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attri ...
- Unity3d游戏场景优化杂谈（2）
动态实时灯光相比静态灯光,非常耗费资源.所以除了能动的角色和物体(比如可以被打的到处乱飞的油桶)静态的地形和建筑,通通使用Lightmap. 强大的Unity内置了一个强大的光照图烘焙工具Beast, ...
- linux系统下根据端口查看进程
第一步:lsof -i:端口号 第二步:根据显示的pid号,查询对应应用程序. ps -ef | grep pid (这里的pid是:23466)
- (转) Spring框架笔记（二十五）——NamedParameterJdbcTemplate与具名参数（转）
在经典的 JDBC 用法中, SQL 参数是用占位符 ? 表示,并且受到位置的限制. 定位参数的问题在于, 一旦参数的顺序发生变化, 就必须改变参数绑定. 在 Spring JDBC 框架中, 绑定 ...
- android 底层入门开发（二）
LED将为我闪烁:控制发光二极管 对于大多数Linux驱动来说,需要直接与硬件交互,本章主要介绍用Linux驱动来控制二极管的明暗,即通过Linux驱动发送数据控制开发板上LED灯的开关. 第一节介绍 ...
- CSS样式--实际开发总结
1. div 嵌套,子div中内容超出范围可以设置: display:inline-block; overflow:auto 即可让子div中出现滚轴 2. 让div中内容垂直方向居中 设置: ...
- Linux下高cpu解决方案（转载）
昨天搞定了一个十万火急的issue,客户抱怨产品升级后系统会变慢和CPU使用率相当高,客户脾气很大,声称不尽快解决这个问题就退货,弄得我们 R&D压力很大,解决这个issue的任务分给了我,客 ...