ANGULARJS implements the tree structure (ztree) menu sample Code _ANGULARJS

Tree-shaped structure

The tree structure has many forms and realizes the way, the Ztree may say is one kind of relatively concise and beautiful and realizes also relatively simple. Ztree is a multifunctional "tree plug-in" that relies on jquery implementations. Its biggest advantage is that the configuration is flexible, as long as the ID and PID values are the same, can form a simple parent-child structure. Plus free open source, the use of ztree more and more people.

The effect chart is as follows

First you need to know what angularjs two-way data binding is to better understand the following code, think for a long time to come up with the following code to implement the left menu tree structure

To achieve the above features you need to operate the following steps:

Add Ng-app to HTML tags and let ANGULARJS take over the entire HTML document

MyApp is the module I created myself

The entire menu is labeled as follows

<div id = "left-menu" ng-controller = "Left-navigation" class = "col-sm-2" style = "margin-top: 50px">
  <ul>

    <!-Dashboard->
    <li>
  <!-Let each level one menu bind a function navFunc, and pass in 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 secondary menu, navAction must be equal to the specified string, this is defined by yourself, navAction is created in the controller->
  <ul ng-show = "navAction === 'hosts'">
        <li> <a href=""> Host </a> </ li>
        <li> <a href=""> Grouping </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=""> installation </a> </ li>
      </ ul>
    </ li>

    <!-User->
    <li>
      <span> <a href="" ng-click="navFunc('users')"> User </a> </ span>
      <ul ng-show = "navAction === 'users'">
        <li> <a href=""> Edit data </a> </ li>
        <li> <a href=""> Change password </a> </ li>
        <li> <a href=""> Add users </a> </ li>
        <li> <a href=""> Message </a> </ li>
      </ ul>
    </ li>

    <!-Configuration->
    <li>
      <a href="" ng-click="navFunc('configuration')"> Configuration </a>
    </ li>

  </ ul>
</ div>

JS code is as follows

// Create myApp module
var myApp = angular.module ('myApp', [])

// Create a controller called Left-navigation
myApp.controller ('Left-navigation', ['$ scope', function ($ scope) {
   // Define a function navFunc, accept one parameter
  $ scope.navFunc = function (arg) {
  // Make the navAction variable equal to the value arg passed in by the function
     $ scope.navAction = arg;
   };
}]); 

Summarize

The whole idea is to click the first level of navigation to execute a function, and the name of a class of navigation sent to the function, and then two-level navigation in the Navaction variable equal to its superior navigation when the display, otherwise hidden. The above is the entire content of this article, I hope to be able to learn or work to bring certain help, if there is doubt you can message exchange.