sábado, 23 de julho de 2016

AngularJS - Filters

Os filtros são usados para alterar e modificar os dados e podem ser utilizados na expression ou diretiva usando o caractere pipe ( | ). Segue a lista de filtros:

Sr.No.NameDescription
1uppercaseconverter o texto para letras maiúsculas.
2lowercaseconverte o texto para letras minúsculas.
3currencytexto em formato moeda.
4filterfiltra o array para um subconjunto dele com base em critérios previstos
5orderbyordena um array com base em critérios previstos

Filtro upperCase


Adicionar filtro upperCase para uma expressão usando caractere pipe ' | '. Aqui nós adicionamos filtro upperCase para imprimir o nome do aluno em maiúsculo.

Insira o nome:<input type = "text" ng-model = "aluno.nome">
Insira o sobrenome: <input type = "text" ng-model = "aluno.sobrenome">
Nome in Upper Case: {{aluno.nomeCompleto() | uppercase}}

Filtro lowerCase


Adicionar filtro lowerCase para uma expressão usando caractere pipe ' | '. Aqui nós adicionamos filtro lowerCase para imprimir o nome do aluno em minúsculo.

Insira o nome:<input type = "text" ng-model = "aluno.nome">
Insira o sobrenome: <input type = "text" ng-model = "aluno.sobrenome">
Nome in Lower Case: {{aluno.nomeCompleto() | lowercase}}

Filtro moeda


Adicionar filtro de moeda para uma expressão retornando número usando caractere pipe ' | '. Aqui nós adicionamos filtro de moeda para taxas de impressão utilizando formato de moeda.

Insira valor: <input type = "text" ng-model = "aluno.valor">
Valor: {{aluno.valor | currency}}

Filtro de um filtro


Para exibir apenas os indivíduos necessários, usamos o nome como filtro.

Insira a matéria: <input type = "text" ng-model = "materiaNome">
Matéria:
<ul>
  <li ng-repeat = "materia in aluno.materias | filter: nomeMateria">
     {{ materia.nome + ', marca:' + materia.nota }}
  </li>
</ul>

Filtro orderBy


Para pedir objetos por notas, usamos orderBy notas.

Materia:
<ul>
  <li ng-repeat = "materia in aluno.materias | orderBy:'notas'">
     {{ materia.nome + ', notas:' + materia.notas }}
  </li>
</ul>

Exemplo Completo:


<html>
   
   <head>
      <title>Angular JS Filters</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h2>Filtros</h2>
      <div ng-app = "mainApp" ng-controller = "alunoController">
         <table border = "0">
            <tr>
               <td>Insira o nome:</td>
               <td><input type = "text" ng-model = "aluno.nome"></td>
            </tr>
            
            <tr>
               <td>Insira o sobrenome: </td>
               <td><input type = "text" ng-model = "aluno.sobrenome"></td>
            </tr>
            
            <tr>
               <td>Insira o valor: </td>
               <td><input type = "text" ng-model = "aluno.valor"></td>
            </tr>
            
            <tr>
               <td>Insira matéria: </td>
               <td><input type = "text" ng-model = "nomeMateria"></td>
            </tr>
         </table>
         <br/>
         
         <table border = "0">
            <tr>
               <td>Nome em maiúsculo: </td><td>{{aluno.nomeCompleto() | uppercase}}</td>
            </tr>
         
            <tr>
               <td>Nome em minúsculo: </td><td>{{aluno.nomeCompleto() | lowercase}}</td>
            </tr>
         
            <tr>
               <td>Valor: </td><td>{{aluno.valor | currency}}
               </td>
            </tr>
    
            <tr>
               <td>Matérias:</td>

               <td>
                  <ul>
                     <li ng-repeat = "materia in aluno.materias | filter:nomeMateria |orderBy:'notas'">
                        {{ materia.nome + ', notas:' + materia.notas }}
                     </li>
                  </ul>
               </td>
            </tr>
         </table>
         
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", [0]);
         
         mainApp.controller('alunoController', function($scope) {
            $scope.aluno = {
               nome: "Jack",
               sobrenome: "Bauer",
               valor:900,
               
               materias:[
                  {nome:'Física',notas:70},
                  {nome:'Química',notas:80},
                  {nome:'Matemática',notas:65}
               ],
               
               nomeCompleto: function() {
                  var alunoObject;
                  alunoObject = $scope.aluno;
                  return alunoObject.nome + " " + alunoObject.sobrenome;
               }
            };
         });
      </script>
      
   </body>
</html>


Saída:


Próximo
Postado por às Nenhum comentário:

AngularJS - Tabelas

Os dados de uma tabela são normalmente repetidos. A diretiva ng-repeat pode ser usada para desenhar a tabela facilmente.

<table>
   <tr>
      <th>Nome</th>
      <th>Notas</th>
   </tr>
   
   <tr ng-repeat = "materia in aluno.materias">
      <td>{{ materia.nome }}</td>
      <td>{{ materia.notas }}</td>
   </tr>
</table>

O visual da tabela pode ser modificado:
<style>
   table, th , td {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
   }
   
   table tr:nth-child(odd) {
      background-color: #f2f2f2;
   }

   table tr:nth-child(even) {
      background-color: #ffffff;
   }
</style>

Exemplo completo:

<html>
   
   <head>
      <title>Angular JS Table</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
      
   </head>
   <body>
      <h2>Tabelas</h2>
      <div ng-app = "mainApp" ng-controller = "alunoController">
         
         <table border = "0">
            <tr>
               <td>Insira o nome:</td>
               <td><input type = "text" ng-model = "aluno.nome"></td>
            </tr>
            
            <tr>
               <td>Insira o sobrenome: </td>
               <td>
                  <input type = "text" ng-model = "aluno.sobrenome">
               </td>
            </tr>
            
            <tr>
               <td>Nome: </td>
               <td>{{aluno.nomeCompleto()}}</td>
            </tr>
            
            <tr>
               <td>Matérias:</td>
     
               <td>
                  <table>
                     <tr>
                        <th>Nome</th>.
                        <th>Notas</th>
                     </tr>
                     
                     <tr ng-repeat = "materia in aluno.materias">
                        <td>{{ materia.nome }}</td>
                        <td>{{ materia.notas }}</td>
                     </tr>
       
                  </table>
               </td>
     
            </tr>
         </table>
         
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('alunoController', function($scope) {
            $scope.aluno = {
               nome: "Jack",
               sobrenome: "Bauer",
               valor:900,
               
               materias:[
                  {nome:'Português',notas:90},
                  {nome:'Química',notas:80},
                  {nome:'Matemática',notas:65},
                  {nome:'Inglês',notas:75},
                  {nome:'Física',notas:55}
               ],
               
               nomeCompleto: function() {
                  var alunoObject;
                  alunoObject = $scope.aluno;
                  return alunoObject.nome + " " + alunoObject.sobrenome;
               }
            };
         });
      </script>
      
   </body>
</html>

Saída:

Próximo

Postado por às Nenhum comentário:
Assinar: Postagens (Atom)