Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS: Filtros
(function() {
'use strict';
angular.module('app-filters', []);
angular.module('app-filters').filter('cpf', function() {
return function(input) {
var str = input + '';
if(str.length <= 11){
str = str.replace(/\D/g, '');
str = str.replace(/(\d{3})(\d)/, "$1.$2");
str = str.replace(/(\d{3})(\d)/, "$1.$2");
str = str.replace(/(\d{3})(\d{1,2})$/, "$1-$2");
}
return str;
};
});
angular.module('app-filters')
.filter('abestado', function() {
return function(input,muito) {
var str = input || ''
if (input) {
str += ' é abestado';
if(muito){
str += ' de cum força'
}
}
return str;
};
});
})();
(function() {
'use strict';
angular.module('app-filters')
.controller('ExemploController', function($scope, $filter,currencyFilter) {
$scope.moedaFormatada = $filter('currency')(123456789);
$scope.moedaFormatada2 = currencyFilter(123456789);
$scope.dataFormatada = $filter('date')('1984-12-15T00:00','medium');
});
})();
<!DOCTYPE html>
<html ng-app="app-filters">
<head>
<meta charset="UTF-8">
<title>Blog do Gabriel Feitosa > AngularJS: Filtros</title>
<style type="text/css">
code{
background-color: #F0E68C;
}
</style>
</head>
<body ng-controller="ExemploController">
<h1>Filtros - No Controller</h1>
<pre>Filtro <b>currency</b> <code>$filter('currency')(123456789)</code> = {{moedaFormatada}}</pre>
<pre>Filtro <b>currencyFilter</b> <code>currencyFilter(123456789)</code> = {{moedaFormatada2}}</pre>
<pre>Filtro <b>date com parâmetro</b> <code>$filter('date')('1984-12-15T00:00','medium')</code> = {{ dataFormatada}}</pre>
<footer>
<hr/>
<a href="http://www.gabrielfeitosa.com"> Blog do Gabriel Feitosa</a>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="app-filters">
<head>
<meta charset="UTF-8">
<title>Blog do Gabriel Feitosa > AngularJS: Filtros</title>
</head>
<body>
<h1>Filtros - Customizado</h1>
<input placeholder="Informe um CPF" ng-model="inputCPF"/>
{{inputCPF | cpf}}
<br><br>
<input placeholder="Nome do amigão do peito?" ng-model="amigo"/>
{{ amigo | abestado:muito}}
<br>
<input type="checkbox" ng-model="muito"/> Seu amigo é muito abestado?
<footer>
<hr/>
<a href="http://www.gabrielfeitosa.com"> Blog do Gabriel Feitosa</a>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="app-filters">
<head>
<meta charset="UTF-8">
<title>Blog do Gabriel Feitosa > AngularJS: Filtros</title>
</head>
<body>
<h1>Filtros - Na View</h1>
<pre>Filtro currency {{<code>123456789 | currency</code>}} = {{ 123456789 | currency}}</pre>
<pre>Filtro encadeados {{<code>"1984-12-15T00:00" | date | uppercase</code>}} = {{ "1984-12-15T00:00" | date | uppercase}}</pre>
<pre>Filtro date com parâmetro {{<code>"1984-12-15T00:00" | date</code>}} = {{ "1984-12-15T00:00" | date:'medium'}}</pre>
<footer>
<hr/>
<a href="http://www.gabrielfeitosa.com"> Blog do Gabriel Feitosa</a>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment