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 ...
随机推荐
- UE4 通过HTTP 接受JPG并动态 构建 UTexture2D 简单例子
s void UChildBaseUserWidget::setTextureFromLoadImg(FHttpRequestPtr _request, FHttpResponsePtr _respo ...
- Spring面向切面之AOP深入探讨
Spring之AOP深入探讨 刚接触AOP之前我已经找了网上各种博客论坛上的关于AOP的文章利于我理解因为听好多人说AOP很复杂,很深奥当我接触之后发现根本不是那么的难于理解.它只是一个基于OOP技术 ...
- js 小技巧
如果想让js每次加载时,都要执行, 那么在 <script type="text/javascript" >中加一个属性reload="1", &l ...
- 回文数组(Rotate Array (JS))
旋转一个数组. function rotate(array,n){ var l =array.length,a=array.map(function(x){return x}),arr=[]; n=n ...
- xml 读取递归算法
xml 读取递归算法:
- Tomcat启动超过45S
Timeout waiting for Tomcat v5.5 Server @localhost to start. Server did not start after 45s ...
- CentOS7下安装MySQL5.7安装与配置(转)
原文地址:http://www.centoscn.com/mysql/2016/0626/7537.html 安装环境:CentOS7 64位 MINI版,安装MySQL5.7 1.配置YUM源 在M ...
- 如何设置mysql的表不区分你大小写
Linux上安装MySQL默认是数据库的表大小写敏感的.修改很简单,只要该一个mysql的配置文件就可以了. mysql> show tables;+---------------------- ...
- RealProxy实现AOP编程(1)
Program.cs class Program { static void Main(string[] args) { User user = " }; var processor = T ...
- ln 软硬链接
链接 在谈软链接与硬链接之前,先来说说文件系统基础知识. Linux 系统中,一切皆文件. 文件包含两部分:文件属性与权限(inode),文件内容(data-block). 一个文件可由1个inode ...