AngularJS---表达式

时间:2024-06-12 08:07:01

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>

AngularJS---表达式

自定义过滤器:

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---表达式