AngularJS Implementation of Tree Structure (ztree) Menu Example Code

Tree Structure

There are many forms and implementation methods for tree structures. zTree can be said to be a relatively simple, beautiful, and easy-to-implement one. zTree is a multi-functional "tree plugin" implemented based on jQuery. Its biggest advantage is flexible configuration, as long as the id and pid values are the same, they can form a simple parent-child structure. In addition, being free and open source, more and more people are using zTree.

The effect is as follows

First, you need to understand what AngularJS two-way data binding is to better understand the following code. It took a long time to come up with the code below to implement the left menu tree structure.

To achieve the above function, you need to perform the following steps:

Add ng to the HTML tags-app, allowing AngularJS to control the entire HTML document

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

myApp is the module I created myself

The tags for the entire menu are as follows

<div id="left-menu" ng-controller="Left-navigation" class="col-sm-2" style="margin-top: 50px">
  <ul>
    <!-- Dashboard -->
    <li>
  <!-- Bind a function navFunc to each first-level menu and pass a specified string. -->
      <a href="" ng-click="navFunc('dashboard')">Dashboard</a>
    </li>
    <!-- Host -->
    <li>
      <span><a ng-click="navFunc('hosts')" href="">Host</a></span>
      <!-- If you want to display the second-level menu, then navAction must be equal to the specified string, which is defined by yourself. navAction is created in the controller. -->
  <ul ng-show="navAction === 'hosts'">
        <li><a href="">Host</a></li>
        <li><a href="">Group</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="">Monitor</a></li>
        <li><a href="">Install</a></li>
      </ul>
    </li>
    <!-- Users -->
    <li>
      <span><a href="" ng-click="navFunc('users')">Users</a></span>
      <ul ng-show="navAction === 'users'">
        <li><a href="">Change Information</a></li>
        <li><a href="">Change Password</a></li>
        <li><a href="">Add User</a></li>
        <li><a href="">Messages</a></li>
      </ul>
    </li>
    <!-- Configuration -->
    <li>
      <a href="" ng-click="navFunc('configuration')">Configuration</a>
    </li>
  </ul>
</div>

JS code as follows

// Create myApp module
var myApp = angular.module('myApp', [])
// Create a controller named Left-navigation
myApp.controller('Left-navigation', ['$scope', function ($scope) {
  // Define a function navFunc, which accepts a parameter
 $scope.navFunc = function (arg) {
 // Let the navAction variable be equal to the value passed in by the function arg
    $scope.navAction = arg;
  });
});

Summary

The overall idea is to execute a function when clicking on the first-level navigation, and then send the name of the first-level navigation to the function. The second-level navigation is displayed when the navAction variable equals its parent navigation, otherwise it is hidden. That's all for this article, and I hope it can bring some help to your learning or work. If you have any questions, you can leave comments for communication.

Basic Tutorial