Dettagli e codice di esempio del filtro personalizzato in AngularJS

　　　　 Un'altra caratteristica di AngularJS è la fornitura di filtri, che possono operare sui risultati dei dati attraverso il modo di管道 sotto UNIX.

　　Utilizzando i tubi, è più facile visualizzare i dati nel binding bidirezionale.

　　Il filtro, durante il processo di elaborazione, trasforma i dati in un nuovo formato e può utilizzare lo stile di catena dei tubi, oltre a accettare parametri aggiuntivi.

　　Metodo di implementazione

　　Vediamo come definire e dichiarare un filtro, prima di tutto è necessario creare il nostro modulo myAppModule

　　　　　　　　　　　　　　　　　　 var myAppModule=angular.module("myApp",[]);

　　Quindi, basandoci sul modulo, crea un filtro:

myAppModule.filter("reverse",function(){
　　　　　　　　　　　
});

　　Dove reverse è il nome del filtro, seguito dalla dichiarazione del metodo del filtro, nel metodo restituisce un altro metodo:

myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++){
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });

　　Il metodo restituito internamente contiene due parametri, uno è il valore di input, ovvero il valore accettato dal nostro filtro.

　　Se si desidera implementare il filtro seguente:

　　name | reverse

　　Quindi input rappresenta il valore rappresentato dal nome.

　　I parametri successivi sono opzionali, qui accettiamo il valore booliano uppercase per determinare se effettuare la conversione di case.

　　Il codice implementato internamente non ha bisogno di spiegazioni. Basta restituire la stringa filtrata.

　　Esempio di programma

<!doctype html>
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="myAppCtrl">
      name:{{ name }}<br>
      reverse name:{{ name | reverse }}<br>
      reverse&uppercase name:{{ name | reverse:true }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp",[]);
      myAppModule.controller("myAppCtrl",["$scope",function($scope){
        $scope.name = "xingoo";
      });
      myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++){
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });
    </script>
  </body>
</html>

　　Risultato dell'esecuzione

Ecco la raccolta delle informazioni su filtri personalizzati AngularJS, continueremo a integrare ulteriori informazioni pertinenti, grazie per il supporto della nostra comunità!

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright spetta ai rispettivi proprietari, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.

Corso di base