Os filtros são usados para alterar os dados modificados e podem ser classificados em expressões ou usando diretivas de caracteres do tubo. Abaixo está uma lista de filtros comumente usados.
| S.No. | nome | descrever |
|---|---|---|
| 1 | capital | Converta o texto em texto em maiúsculas. |
| 2 | minúscula | Converta o texto em texto minúsculo. |
| 3 | moeda | Texto do formato da moeda. |
| 4 | Filtro | Filtre uma matriz de subconjuntos baseada nos critérios fornecidos. |
| 5 | Organizar | A classificação fornece matrizes básicas padrão. |
Filtro de caps
Adicione os filtros em maiúsculas para usar expressões de caracteres de tubo. Aqui, os filtros capitais são adicionados e os nomes dos alunos são impressos em letras maiúsculas.
Digite o primeiro nome: <input type = "text" ng-model = "student.firstname"> insira o sobrenome: <input type = "text" ng-model = "student.lastName"> nome no caso superior: {{student.fullName () | Uppercase}}Filtro minúsculo
Adicione filtros minúsculos, usando expressões de caracteres de tubo. Adicione um filtro em minúsculas aqui para imprimir nomes de alunos em letras minúsculas.
Digite o primeiro nome: <input type = "text" ng-model = "student.firstname"> insira o sobrenome: <input type = "text" ng-model = "student.lastName"> nome no caso superior: {{student.fullName () | minúsculo}}Filtro de moeda
O filtro do dólar canadense usa um caractere de tubo para retornar a expressão do número. Aqui adicionamos filtros à taxa de impressão de moeda usando o formato da moeda.
Digite taxas: <input type = "text" ng-model = "student.fees"> taxas: {{student.fees | moeda}}Filtros para filtros
Para exibir apenas os tópicos desejados, usamos o sujeito como o filtro.
Digite Assunto: <input type = "text" ng-model = "sujeitoName"> Assunto: <ul> <li ng-repeat = "Assunto em Student.subjects | Filtro: sujeito"> {{sujeito.name + ', marcas:' + sujeito.marks}} </li> </ul>Classificar filtro
Para classificar os tópicos por tags, usamos o OrderBy Tags.
Assunto: <ul> <li ng-repeat = "Assunto em Student.Subjects | Orderby: 'Marks'"> {{sujeito.name + ', Marks:' + sujeito.marks}} </li> </ul>exemplo
Os exemplos a seguir mostrarão todos os filtros mencionados acima.
testangularjs.html
<html> <head> <title> filtros angulares js </ititle> </ad Head> <body> <h2> aplicação de amostra de angularjs </h2> <div ng-app = "" ng-controller = "StudentController"> <tabela> <tr> <td> digite o primeiro nome: </td> <td> <td> <td "> <ty ty table> <tr> <td> digite o primeiro nome: </td> <td> <td> <td"> <tyster> <tr> <td> digite o primeiro nome: ng-model = "student.firstname"> </td> </tr> <tr> <td> digite o sobrenome: </td> <td> <input type = "text" ng-model = "student.lastname"> </td> </tr> <t> Enter Fees: </td> <td> <t> <b) <sty) <sty) <sty) </td) </td) </td "</td" </td "</td" </td) </td "td" textname "> </td> </td> <t> <t> text) ng-model = "student.fees"> </td> </tr> <tr> <td> digite o assunto: </td> <td> <input type = "text" ng-model = "sujeito"> </td> </tr> </tr> </tr> <t> <t> names na parte superior: </td> Uppercase}} </td> </tr> <tr> <td> nome em minúsculas: </td> <td> {{student.fullName () | minúsculo}} </td> </tr> <tr> <td> taxas: </td> <td> {{student.fees | Moeda}} </td> </tr> <tr> <td> Assunto: </td> <td> <ul> <li ng-repeat = "Assunto em Student.subjects | filtro: subjectName | orderby: 'Marks'"> {{sujeito.name + ', Marks:' + sujeito.marks}} </li></ul></td></tr></table></div><script>function studentController($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {Nome: 'Math', Marks: 65}], FullName: function () {var StudentObject; StudentObject = $ SCOPE.STUDENT; Retorne statãobject.firstname + "" + studpobject.lastName; }};} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </sCript> </body> </html>Saída
Open textangularjs.html em um navegador da web e veja os seguintes resultados:
O exposto acima são as informações que classificam o filtro AngularJS. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!