Sample Code for implementing the tree structure (ztree) menu in AngularJS, angularjsztree

Sample Code for implementing the tree structure (ztree) menu in AngularJS, angularjsztree

Tree Structure

The tree structure has multiple forms and implementation methods. zTree is simple, elegant, and easy to implement. ZTree is a multi-functional "tree plug-in" implemented by jQuery ". Its biggest advantage is its flexible configuration. A simple parent-child structure can be formed as long as the id and pid values are the same. Coupled with free open source, zTree is becoming increasingly popular.

As follows:

First, you need to know what AngularJS's two-way data binding is to better understand the following code. After a long time, you have come up with the following code to implement the left-side menu tree structure.

To implement the above functions, follow these steps:

Add ng-app to the HTML tag to enable AngularJS to manage the entire HTML document.

MyApp is a module created by myself
The label of the entire menu is 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 level-1 menu and input 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 level-2 menu, 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> <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 =" "> Monitoring </ a> </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 =" "> modify data </a> </li> <a href = ""> change the password </a> </li> <a href = ""> Add a user </a> </li> <a href = ""> message </a> </li> </ul> </li> <! -- Configuration --> <li> <a href = "" ng-click = "navFunc ('configuration ') "> Configuration </a> </li> </ul> </div>
The JS Code is as follows:
// Create the myApp module var myApp = angular. module ('myapp', []) // create a controller named Left-navigationmyApp.controller ('left-navigation', ['$ scope', function ($ scope) {// define a function navFunc and accept a parameter $ scope. navFunc = function (arg) {// make the navAction variable equal to the value arg $ scope passed in by the function. navAction = arg ;};}]);
Summary
The overall idea is to execute a function when you click the first-level navigation and send the name of the first-level navigation to the function. Then, the second-level navigation is displayed when the navAction variable is equal to its upper-level navigation, otherwise, it will be hidden. The above is all about this article. I hope it will help you in your study or work. If you have any questions, please leave a message.