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