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);
}
}
})