SPA Jumpstart - Angular - 6 - Filters
7
Filt ers
-
Upload
wesley-lemos -
Category
Software
-
view
86 -
download
5
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-roteamento
Transcript of SPA Jumpstart - Angular - 6 - Filters
Filters
Web Browser
ASP.NETAngularJS
Class LibraryBusiness
Index.htmlAppModule
RoutesDirectivies
TemplatesViews
ControllerViewModel
ServicesFactories
Repository
BreezeJS$resource$http
WebAPI
ApiController Services
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
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>
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>
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; })
Wesley A.LemosLages/SC - 2014
