Ejemplo de código para implementar la estructura de árbol (ztree) en AngularJS

Estructura de árbol

La estructura de árbol tiene varios tipos y formas de implementación, zTree puede decirse que es una opción bastante sencilla y hermosa, y también relativamente simple de implementar. zTree es un plugin de 'árbol' multifuncional basado en jQuery. Su mayor ventaja es la flexibilidad de configuración, ya que con valores id y pid iguales, se puede formar una estructura de padre-hijo simple. Además, siendo gratuito y de código abierto, cada vez más personas usan zTree.

La imagen del efecto es la siguiente

Primero, es necesario entender qué es el enlace de datos bidireccional de AngularJS para comprender mejor el código a continuación, después de mucho pensar, se decidió usar el siguiente código para implementar la estructura de árbol del menú izquierdo

Para implementar la función anterior, es necesario seguir los siguientes pasos:

Agregar ng en las etiquetas HTML para implementar-app, para que AngularJS controle todo el documento HTML

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

myApp es el módulo que yo mismo he creado

Las etiquetas de todo el menú son las siguientes

<div id="izquierda-menú" ng-controller="Izquierda-navegación" class="col-sm-2" style="margin-top: 50px">
  <ul>
    <!-- Tablero -->
    <li>
  <!-- Asignar una función navFunc a cada menú de nivel superior e ingresar una cadena especificada -->
      <a href="" ng-click="navFunc('dashboard')">Tablero</a>
    </li>
    <!-- Host -->
    <li>
      <span><a ng-click="navFunc('hosts')" href="">Host</a></span>
      <!-- Si se desea mostrar un menú de nivel secundario, navAction debe ser igual al string especificado, esto es definido por uno mismo, navAction se crea en el controller -->
  <ul ng-show="navAction === 'hosts'">
        <li><a href="">Host</a></li>
        <li><a href="">Agrupación</a></li>
      </ul>
    </li>
    <!-- Contenedor -->
    <li>
      <a href="" ng-click="navFunc('container')">Contenedor</a>
    </li>
    <!-- Plantilla -->
    <li>
      <span><a href="" ng-click="navFunc('template')">Plantilla</a></span>
      <ul ng-show="navAction === 'template'">
        <li><a href="">Monitorización</a></li>
        <li><a href="">Instalación</a></li>
      </ul>
    </li>
    <!-- Usuarios -->
    <li>
      <span><a href="" ng-click="navFunc('users')">Usuarios</a></span>
      <ul ng-show="navAction === 'users'">
        <li><a href="">Modificar información</a></li>
        <li><a href="">Modificar contraseña</a></li>
        <li><a href="">Agregar usuario</a></li>
        <li><a href="">Mensajes</a></li>
      </ul>
    </li>
    <!-- Configuración -->
    <li>
      <a href="" ng-click="navFunc('configuration')">Configuración</a>
    </li>
  </ul>
</div>

El código JS es el siguiente

// Crear el módulo myApp
var myApp = angular.module('myApp', [])
// Crear un controlador, llamado Left-navigation
myApp.controller('Left-navigation, ['$scope', function ($scope) {
  // Definir una función navFunc, que recibe un parámetro
 $scope.navFunc = function (arg) {
 // Hacer que la variable navAction sea igual al valor pasado al función arg
    $scope.navAction = arg;
  });
});

Resumen

La idea general es que al hacer clic en la navegación de nivel superior se ejecuta una función y se envía el nombre de la navegación de nivel superior a la función, luego la navegación de nivel inferior se muestra cuando la variable navAction es igual a la navegación superior, de lo contrario se oculta. Esto es todo el contenido del artículo, espero que pueda ayudar a algunos de ustedes en su aprendizaje o trabajo. Si tienen alguna pregunta, pueden dejar comentarios para intercambiar.

Tutoriales básicos

Te gustará