<!doctype html>
<html data-ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="filters.js"></script>
<script src="main.js"></script>
</head>
<body data-ng-controller="MainController">
<label for="percent">Your value</label>
<input id="percent" data-ng-model="Value" />
as a percentage
{{Percentage}}
</body>
</html>
'use strict';
function MainController($scope, $filter) {
$scope.$watch('Value', function(){
$scope.Percentage = $filter('percent')($scope.Value);
});
}
MainController.$inject = ['$scope', '$filter'];
angular.module('app.filters', [])
.filter('percent', function () {
return function (text, length, end) {
if (text == null || text == '') text = '0';
text = parseInt(text) / 100;
return text.toFixed(2);
};
});
'use strict';
var app = angular.module('app', ['app.filters']);