Esempio di codice per implementare la struttura a albero del menu (ztree) in AngularJS

Struttura ad albero

La struttura a albero ha molte forme e metodi di implementazione, zTree può essere considerato un esempio di semplicità e bellezza, e anche relativamente semplice da implementare. zTree è un plugin multifunzionale “albero” implementato con jQuery. Il suo maggiore vantaggio è la flessibilità della configurazione, poiché se i valori di id e pid sono gli stessi, si può formare una struttura di padre-figlio semplice. Inoltre, essendo gratuito e open source, sempre più persone utilizzano zTree.

L'effetto visivo è il seguente

Prima di tutto, devi capire cosa è il binding bidirezionale di AngularJS per comprendere meglio il codice seguente, ho pensato a lungo e ho deciso di implementare la struttura ad albero del menu di sinistra con il seguente codice

Per implementare la funzione sopra descritta, devi seguire i seguenti passaggi:

Aggiungi ng-app all'interno dell'etichetta HTML per far gestire tutto il documento HTML da AngularJS

<html lang="en" ng-app="myApp">

myApp è il modulo che ho creato personalmente

I tag del menu completo sono i seguenti

<div id="left-menu" ng-controller="Left-navigation" class="col-sm-2" style="margin-top: 50px">
  <ul>
    <!-- pannello di controllo -->
    <li>
  <!-- Fai binding di ogni menu di livello 1 a una funzione navFunc e passa una stringa specificata -->
      <a href="" ng-click="navFunc('dashboard')">pannello di controllo</a>
    </li>
    <!-- host -->
    <li>
      <span><a ng-click="navFunc('hosts')" href="">host</a></span>
      <!-- Se si desidera visualizzare il menu di livello 2, navAction deve essere uguale alla stringa specificata, questa è definita da me, navAction è creata nel controller -->
  <ul ng-show="navAction === 'hosts'">
        <li><a href="">host</a></li>
        <li><a href="">gruppo</a></li>
      </ul>
    </li>
    <!-- container -->
    <li>
      <a href="" ng-click="navFunc('container')">container</a>
    </li>
    <!-- template -->
    <li>
      <span><a href="" ng-click="navFunc('template')">template</a></span>
      <ul ng-show="navAction === 'template'">
        <li><a href="">monitoraggio</a></li>
        <li><a href="">installazione</a></li>
      </ul>
    </li>
    <!-- utente -->
    <li>
      <span><a href="" ng-click="navFunc('users')">utente</a></span>
      <ul ng-show="navAction === 'users'">
        <li><a href="">Modifica informazioni</a></li>
        <li><a href="">Modifica password</a></li>
        <li><a href="">Aggiungi utente</a></li>
        <li><a href="">Messaggio</a></li>
      </ul>
    </li>
    <!-- Configurazione -->
    <li>
      <a href="" ng-click="navFunc('configuration')">Configurazione</a>
    </li>
  </ul>
</div>

JS codice come segue

// Creare il modulo myApp
var myApp = angular.module('myApp', [])
// Creare un controller chiamato Left-navigation
myApp.controller('Left-navigation', ['$scope', function ($scope) {
  // Definire una funzione navFunc che accetta un parametro
 $scope.navFunc = function (arg) {
 // Fare diventare la variabile navAction uguale al valore passato alla funzione arg
    $scope.navAction = arg;
  });
});

Conclusione

L'idea di base è eseguire una funzione quando si clicca su una navigazione di livello 1, inviando il nome della navigazione di livello 1 alla funzione, e poi la navigazione di livello 2 viene visualizzata quando la variabile navAction è uguale alla navigazione superiore, altrimenti viene nascosta. Questo è tutto il contenuto dell'articolo, spero possa essere di aiuto per la vostra apprendimento o lavoro, se avete domande potete lasciare un commento per discuterle.

Manuale di base