<!DOCTYPE html>
<html ng-app="upperDemo">
<head>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="UpController">
<span>{{ name | up }}</span>
</body>
</html>
angular.module('upperDemo', [])
.controller('UpController', ['$scope', function($scope){
$scope.name = 'hello howard.zuo';
}])
.filter('up', [function(){
return function(value){
return value.toUpperCase();
};
}]);
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #fff;
}
span {
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}