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 ...
随机推荐
- 关于C语言编译器Dev c++的调试
大家应该都安装了C语言的编译软件,不过我个人认为Dev C++比VC6.0好用,所以只是说明DEv C++软件的调试方法 如果英文不好的,可以先汉化,再调试. 汉化:工具-----环境选项------ ...
- 关于peersim样例配置文件的超详细解读（新手勿喷）
相信很多兄弟一开始接触peersim,对配置文件还是有点不适应,我看了好久的样例的配置文件,一层层去找对应的文件的方法,终于好像悟懂了一点,记下来以后回顾. 贴上代码,一点点分析. 首先要说下所谓的配 ...
- eclipse搭建servlet项目
1.创建web项目 2.勾选Generate web.xml 3.创建Class文件并实现Servlet接口 当搜索Servlet接口时,如果未发现接口则Add library→选择tomcat版本至 ...
- 【JavaScript忍者秘籍】
- The requested operation has failed apache
在安装apache后, 启动apache时提示The requested operation has failed错误: 通过一排除 cd apache 安装的Bin目录cmd如下秘密(双引号中的内容 ...
- ion-refresher 下拉更新数据
使用指令ion-refresher可以为容器eg:ion-scroll 和 ion-content进行拉动刷新 <ion-scroll> <ion-refresher on-refr ...
- junit单元测试（keeps the bar green to keeps the code clean)
error是程序错误,failure是测试错误. junit概要: JUnit是由 Erich Gamma (设计模式的创始人)和 Kent Beck (敏捷开发的创始人之一)编写的一个回归测试框架( ...
- Swift—继承
一个类可以继承另一个类的方法,属性和其他特性.当一个类继承其他类时,继承类叫子类,被继承类叫超类(或父类).在Swift中,继承具有单继承的特点,每个子类只有一个直接父类,继承是区分类与其他类型的一个 ...
- Surprise团队第四周项目总结
Surprise团队第四周项目总结 项目进展 这周我们小组的项目在上周的基础上进行了补充,主要注重在注册登录界面的改进优化与美观,以及关于人计算法的学习与初步实现. 我们小组针对上次APP中界面出现的 ...
- 第六章第一个linux个程序：统计单词个数
第六章第一个linux个程序:统计单词个数 从本章就开始激动人心的时刻——实战,去慢慢揭开linux神秘的面纱.本章的实例是统计一片文章或者一段文字中的单词个数. 第 1 步:建立 Linu x 驱 ...