demonstração
Aqui está todo o exemplo de demonstração
1. FILTER.JS FILE
Angular.Module ("ExampleApp", []). Constant ("ProductsUrl", "http: // localhost:/Products") .Controller ("DefaultCtrl", function ($ scope, $ http, produtos de dados (datados) (scope.Prod.Prod.Prod.Prod.Prod.Prod.StTP; variedade});});Aqui eu uso o serviço introduzido como uma constante, e a vantagem de escrever isso é que posso modificá -lo facilmente.
Para usar o serviço $ http, consulte meus angulares (iii) implantados
<! Doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "ExampleApp"> <head> <meta http-equiv = "content-type" content = "text/html; src = "angular.js"> </script> <link href = "bootstrap-theme.css" rel = "stylesheet"/> <link href = "bootstrap.css" rel = "stylesheet"/> <script src = "filtro.js"> </script> </hidet> ng "</scort> ng) ><div><div><h>Products</h></div><table><thead><tr><td>Name</td><td>Category</td><td>Price</td><td>expiry</td></tr></thead><tbody><ttr ng-repeat="item in products"><td>{{item.name | uppercase}} </td> <td> {{item.category}} </td> <td> {{item.price | moeda}} </td> <td> {{item.expiry | número}} </td> <td> {{item | JSON}} </td> </tr> </tbody> </tabela> </div> </body> </html>Resultados da execução:
Use filtro
Os filtros são divididos em duas categorias:
1. Filtrando dados individuais
2. Opere no conjunto.
1. É relativamente simples operar os dados . Como mostrado na demonstração, ela pode ser formatada em {{item | moeda}}, etc.
Moeda: "F" pode ser o preço filtrado em libras.
Um único filtro de dados deseja filtrar o formato de dados, após o filtro: no caractere de formato correspondente.
Número: representa os dados decimais de dados reservados.
2: Filtragem de coleções , filtrando um certo número da coleção.
Na demonstração básica, adicionei isso:
<div> <h> produtos </h> </div> <div> limite: <select ng-model = "limitvalue" ng-options = "p para p em limitrange"> </leclect> </div> filter.js foi adicionado: $ http.get (prourmurl) .success (function (data) {scope.prod.produts; ""; // se for uma string <span style = "colordes-color: rgb (,,);"> $ scope.limitrange = []; para (var i =; i <= $ scope.products.length; i ++) {$ scope.limitrange.push (i.toString (); } </span> </span>}); <tr ng-repeat = "Item em produtos | Limitto: limitvalue"> <td> {{item.name | uppercase}} </td> <td> {{item.category}} </td> <td> {{item.price | moeda}} </td> <td> {{item.expiry | número}} </td> <td> {{item | json}} </td> </tr> <span style = "line-hight :.; font-family: Verdana, Arial, Helvetica, Sans-Serif; font-size: px; cor de fundo: rgb (,,);"> </span>Ao escrever funções, você deve ser escrito em sucesso porque os dados JSON são obtidos de forma assíncrona.
resultado:
Limite: Você pode ajustar o número de exibição na página.
Criar filtro
AngularJS tem dois filtros. Primeiro, podemos criar filtros que formatam dados individuais, como: a string de saída Primeira capitalização de letra.
Vamos primeiro falar sobre como definir um filtro: o filtro é criado através do Module.Filter, e o formato geral da criação é:
Angular.Module ("ExampleApp") // significa obter um módulo. O filtro é criado sob o módulo.
.Filter ("Labelcase", function () {// recebe dois parâmetros, o primeiro parâmetro representa o nome do filtro, e o segundo é uma função de fábrica
Retornar função (valor, reverso) {// retorna uma função do trabalhador para filtrar o processo de filtragem correspondente. O primeiro parâmetro indica o objeto que precisa ser formatado e o segundo parâmetro indica a configuração e qual formato seguir.
if (angular.ISSTRING (valor)) {var intermediate = reverso? value.TOUPPERCASE (): value.TolowerCase (); return (reverso? intermediário []. ToLowerCase (): intermediário [].Eu escrevi isso em um arquivo JS. CustomFilter.js não se esqueça de adicioná -lo.
<link href = "bootstrap.css" rel = "stylesheet"/> <script src = "filter.js"> </sCript> <script src = "customFilter.js"> </sCript>
Ok agora vou mudar os dados:
<td> {{item.name | LabelCase: true}} </td>Como mencionado anteriormente, se você precisar adicionar informações de configuração, o formato de escrita é filtro: opção
Obviamente, os parâmetros padrão não podem ser gravados e o valor padrão será fornecido nulo ou indefinido.
resultado:
É simples personalizar uma função de filtro para processar cada dados.
2. Personalize as funções processadas por uma coleção, assim como o Limitto.
angular.module ("ExampleApp"). filtro ("etiqueta", function () {retorna função (valor, reverso) {if (angular.isstring (value)) {var intermediate = reverse? value.touppercase (): value.toLowerCase (); retorno reverso? intermedie.substr ());} else {return value;}}}). filtro ("skip", function () {return function (dados, count) {if (angular.isarray (data) && angular.isNumber (count) {if (data.length <count | dados;}}});A peça modificada HTML:
<tr ng-repeat = "Item em produtos | Pule:">
Resultados: Há um total de seis dados e 2 peças foram passadas usando um filtro de pular.
Ao personalizar o filtro, descobri que um filtro foi definido. Não quero defini -lo repetidamente. O que devo fazer? Também podemos usar um filtro criado para criá -lo.
angular.module ("ExampleApp"). filtro ("etiqueta", function () {retorna função (valor, reverso) {if (angular.isstring (value)) {var intermediate = reverse? value.touppercase (): value.toLowerCase (); retorno reverso? intermedie.substr ());} else {return value;}}}). filtro ("skip", function () {return function (dados, count) {if (angular.isarray (data) && angular.isNumber (count) {if (data.length <count | Data;}}}). filtro ("Take", function ($ filter) {// Você pode ver que eu faço referência ao serviço interno de angularjs na função de fábrica. $ filtro ("Limitto") (Skipdata, Takecount); // Limitto é um filtro embutido.$ filtro ('Skip') chama o filtro Skip, porque ele retorna uma função, para que possamos continuar passando por parâmetros.
<tr ng-repeat = "Item em produtos | Take ::">
resultado:
É assim que o filtro é feito. Não é muito simples?