spa jumpstart - angular - 6 - filters
DESCRIPTION
Curso ministrado por mim na NDDigital sobre como iniciar uma aplicação AngularJS direcionada ao consumo de WebAPI, baseado neste fluxo: https://www.examtime.com/pt-BR/p/1084807 ::Table of Contents 1 - Introdução http://pt.slideshare.net/anisanwesley/angular-jumpstart-1-introduo-38460785 2 - Arquitetura http://pt.slideshare.net/anisanwesley/angular-jumpstart-2-arquitetura 3 - Controllers http://pt.slideshare.net/anisanwesley/angular-jumpstart-3-controllers 4 - Diretivas nativas http://pt.slideshare.net/anisanwesley/angular-jumpstart-4-diretivas-nativas 5 - Diretivas customizadas http://pt.slideshare.net/anisanwesley/angular-jumpstart-5-diretivas-customizadas 6 - Filters http://pt.slideshare.net/anisanwesley/angular-jumpstart-6-filters 7 - Validação http://pt.slideshare.net/anisanwesley/angular-jumpstart-7-validao 8 - Services http://pt.slideshare.net/anisanwesley/angular-jumpstart-8-services 9 - Modulos http://pt.slideshare.net/anisanwesley/angular-jumpstart-9-modulos 10 - Requests http://pt.slideshare.net/anisanwesley/angular-jumpstart-10-requests 11 - Roteamento http://pt.slideshare.net/anisanwesley/angular-jumpstart-11-roteamentoTRANSCRIPT
![Page 1: SPA Jumpstart - Angular - 6 - Filters](https://reader036.vdocuments.us/reader036/viewer/2022082514/558bb1e7d8b42a64048b4575/html5/thumbnails/1.jpg)
Filters
![Page 2: SPA Jumpstart - Angular - 6 - Filters](https://reader036.vdocuments.us/reader036/viewer/2022082514/558bb1e7d8b42a64048b4575/html5/thumbnails/2.jpg)
Web Browser
ASP.NETAngularJS
Class LibraryBusiness
Index.htmlAppModule
RoutesDirectivies
TemplatesViews
ControllerViewModel
ServicesFactories
Repository
BreezeJS$resource$http
WebAPI
ApiController Services
![Page 3: SPA Jumpstart - Angular - 6 - Filters](https://reader036.vdocuments.us/reader036/viewer/2022082514/558bb1e7d8b42a64048b4575/html5/thumbnails/3.jpg)
Filters
Definição
Formatadores e
agrupadores de conteúdo
Utilizados para
manipular a exibição de dados no
DOM
Devem ser registrados em algum
modulo
Formatação• Currency• Date• Number• Uppercase• lowercase
Agrupamento• filter• limitTo• orderby
![Page 4: SPA Jumpstart - Angular - 6 - Filters](https://reader036.vdocuments.us/reader036/viewer/2022082514/558bb1e7d8b42a64048b4575/html5/thumbnails/4.jpg)
Filters
Se usa um filter da seguinte maneira:
{{expression| filter}}
Ou {{expression| filter : parametros}}
Implementação
<script type="text/javascript"> var app = angular.module('app', []); var filterController = function () { this.titular = 'jose da silva'; this.dataCriacao = '2014-07-30T01:21:15.73805-03:00'; this.serial = '23423 5786 76 8768 31'; this.numero = '26382374234'; this.saldo = 1003.45; }; app.controller('filterController', filterController); </script> <body ng-controller="filterController as vm"> <p> Titular: {{vm.titular | titleCase}} </p> <p> Criação: {{vm.dataCriacao | date:'dd/MM/yyyy => mm:hh'}} </p> <p> Serial: {{vm.serial | spaceToHifens}} </p> <p> Numero: {{vm.numero | number}} </p> <p> Saldo: {{vm.saldo | currency}} </p> </body>
![Page 5: SPA Jumpstart - Angular - 6 - Filters](https://reader036.vdocuments.us/reader036/viewer/2022082514/558bb1e7d8b42a64048b4575/html5/thumbnails/5.jpg)
FiltersImplementação
Filtro: <input type="text" ng-model="filterText" /> , mostrando <input type="number" ng-model='vm.limitNumber' /> <table class="table table-striped"> <tr ng-repeat="person in vm.people | filter : filterText | limitTo : vm.limitNumber"> <td>{{person.name}}</td> <td>{{person.age}}</td> </tr> </table>
![Page 6: SPA Jumpstart - Angular - 6 - Filters](https://reader036.vdocuments.us/reader036/viewer/2022082514/558bb1e7d8b42a64048b4575/html5/thumbnails/6.jpg)
Filters
Para criar um filter basta retornar uma function que:
Recebe uma entrada
Retorna uma saída
Customizado
app.filter('filterName',function() { var functionRetornada = function (input) { return inputTratado; }; return functionRetornada; })
app.filter('spaceToHifens',function() { var hifensFilter = function (input) { return input.split(' ').join('-'); }; return hifensFilter; })
![Page 7: SPA Jumpstart - Angular - 6 - Filters](https://reader036.vdocuments.us/reader036/viewer/2022082514/558bb1e7d8b42a64048b4575/html5/thumbnails/7.jpg)
Wesley A.LemosLages/SC - 2014