Exemplo de Código de Implementação da Estrutura de Árvore (ztree) no AngularJS

Estrutura de árvore

A estrutura de árvore pode ter várias formas e métodos de implementação, zTree pode ser considerado uma estrutura relativamente simples, bonita e fácil de implementar. zTree é um plug-in multifuncional "árvore" implementado com jQuery. Sua maior vantagem é a flexibilidade de configuração, desde que os valores de id e pid sejam iguais, pode formar uma estrutura de pai-filho simples. Além disso, sendo gratuito e de código aberto, cada vez mais pessoas estão usando zTree.

A imagem do efeito é a seguinte

Primeiro, você precisa saber o que é o binding de dados bidirecional do AngularJS para entender melhor o código abaixo, pensei muito antes de pensar em usar o código abaixo para implementar a estrutura de árvore de menu esquerdo

Para implementar a função acima, você precisa operar os seguintes passos:

Adicione ng ao dentro das tags HTML-app, para que o AngularJS controle todo o documento HTML

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

myApp é o módulo que eu criei

As tags da entire do menu são as seguintes

<div id="left-menu" ng-controller="Left-navegação" class="col-sm-2" style="margin-top: 50px">
  <ul>
    <!-- Painel de Controle -->
    <li>
  <!-- Vincule uma função navFunc a cada menu de primeiro nível e passe uma string específica -->
      <a href="" ng-click="navFunc('dashboard')">Painel de Controle</a>
    </li>
    <!-- Máquina -->
    <li>
      <span><a ng-click="navFunc('hosts')" href="">Máquina</a></span>
      <!-- Se você deseja exibir o menu de segundo nível, então navAction deve ser igual ao string definido, isso é definido por você mesmo, navAction é criado no controller -->
  <ul ng-show="navAction === 'hosts'">
        <li><a href="">Máquina</a></li>
        <li><a href="">Agrupamento</a></li>
      </ul>
    </li>
    <!-- Container -->
    <li>
      <a href="" ng-click="navFunc('container')">Container</a>
    </li>
    <!-- Modelo -->
    <li>
      <span><a href="" ng-click="navFunc('template')">Modelo</a></span>
      <ul ng-show="navAction === 'template'">
        <li><a href="">Monitoramento</a></li>
        <li><a href="">Instalação</a></li>
      </ul>
    </li>
    <!-- usuário -->
    <li>
      <span><a href="" ng-click="navFunc('users')">Usuário</a></span>
      <ul ng-show="navAction === 'users'">
        <li><a href="">Alterar informações</a></li>
        <li><a href="">Alterar senha</a></li>
        <li><a href="">Adicionar usuário</a></li>
        <li><a href="">Mensagem</a></li>
      </ul>
    </li>
    <!-- Configuração -->
    <li>
      <a href="" ng-click="navFunc('configuration')">Configuração</a>
    </li>
  </ul>
</div>

Código JS如下

// Criar o módulo myApp
var myApp = angular.module('myApp', [])
// Criar um controller, chamado Left-navigation
myApp.controller('Left-navigation, ['$scope', function ($scope) {
  // Definir uma função navFunc, que aceita um parâmetro
 $scope.navFunc = function (arg) {
 // Definir a variável navAction como o valor passado para a função arg
    $scope.navAction = arg;
  });
});

Resumo

A ideia geral é executar uma função ao clicar no menu de navegação de nível 1, enviar o nome do menu de navegação de nível 1 para a função, e o menu de navegação de nível 2 é exibido quando a variável navAction é igual ao menu de navegação superior, caso contrário, é escondido. Isso é tudo o que há no artigo. Espero que isso ajude um pouco no seu aprendizado ou trabalho. Se tiver alguma dúvida, pode deixar um comentário para trocar ideias.

Tutorial Básico