Spiegazione dettagliata dei filtri e dell'ordinamento di AngularJS e esempi di codice

Abbiamo già imparato l'uso di AngularJS, quindi scriviamo un piccolo programma per implementare le funzioni di ricerca, filtraggio e ordinamento.

In questo programma puoi imparare:

　　1 Filtri di angularjs

　　2 Metodo di utilizzo di ng-repeat

　　3 Utilizzo dei controller

　　4 Binding dei dati

　　Analisi di progettazione del programma

　　Prima di tutto, per eseguire il filtraggio di ricerca, è necessario utilizzare il filtro filter di AngularJS.

　　Aggiungi direttamente il comando pipe | alla fine dell'espressione, seguendo lo stile di scrittura seguente per ottenere un effetto di filtraggio:

　　L'operazione di filtraggio può essere realizzata utilizzando filter, query è la stringa di input utilizzata per il filtraggio.

　　Allo stesso modo, orderBy può essere utilizzato per implementare la funzione di ordinamento:

　　La ricerca e l'ordinamento sopra menzionati riguardano due variabili, query e order. Ecco come si può effettuare il binding dei dati utilizzando ng-model:

      Cerca:<input ng-model="query">
      Ordina per:<select ng-model="order">
        <option value="name">name</option>
        <option value="age">age</option>
      </select>

　　AngularJS è un linguaggio di framework basato su DOM, quindi non è necessario implementare alcun listener o trigger di eventi. Quando qualsiasi cambiamento avviene nell'input query, viene attivato un aggiornamento bidirezionale tra l'input e l'espressione visualizzata sotto!

　　In confronto ad altri framework, AngularJS aggiunge al DOM attraverso il metodo innerHTML della stringa, accelerando l'esposizione del modello e della vista. E riduce la scrittura di un gran numero di codici inutili come listener e trigger, realizzando effettivamente un effetto simile a quello di Spring~

　　La visualizzazione dei dati può essere realizzata tramite ng-repeat. Quando la pagina raggiunge ng-repeat, viene clonato un etichetta per ogni elemento dell'array e viene compilato e解析ato.　　　

　　　<ul class="persons">
        <li ng-repeat="person in persons | filter:query | orderBy:order">
          {{person.name}}
          {{person.age}}
        </li>
      </ul>

　　Il lavoro rimanente richiede l'inizializzazione dell'array persons all'interno dello script:　　　

  <div ng-controller="ctl">
          ...
    </div>
    <script type="text/javascript">
      function ctl($scope){
        $scope.persons = [
          {"name":"xingoo","age":25},
          {"name":"zhangsan","age":18},
          {"name":"lisi","age":20},
          {"name":"wangwu","age":30}
        ];
        $scope.order = "age";
      }
    </script>

　　Codice e risultati

　　Infine, ecco tutto il codice:

<!doctype html>
<html ng-app>
  <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="ctl">
      Cerca:<input ng-model="query">
      Ordina per:<select ng-model="order">
        <option value="name">name</option>
        <option value="age">age</option>
      </select>
      <ul class="persons">
        <li ng-repeat="person in persons | filter:query | orderBy:order">
          {{person.name}}
          {{person.age}}
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      function ctl($scope){
        $scope.persons = [
          {"name":"xingoo","age":25},
          {"name":"zhangsan","age":18},
          {"name":"lisi","age":20},
          {"name":"wangwu","age":30}
        ];
        $scope.order = "age";
      }
    </script>
  </body>
</html>

　　Risultato dell'uso:

　　Per impostazione predefinita, l'ordinamento viene effettuato utilizzando l'età:

　　Selezionando è possibile ordinare per nome

　　Quando si inseriscono caratteri, verranno automaticamente filtrati alcune opzioni di ricerca

Ecco la raccolta di materiali relativi a filtri e ordinamenti di AngularJS, continueremo a integrare ulteriori materiali, grazie per il supporto della nostra comunità!

Dichiarazione: il contenuto di questo articolo è stato preso 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 elaborato manualmente e non assume responsabilità legali correlate. 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 e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Guida di base