樹形結構
樹形結構有多種形式和實現方式，zTree可以說得上是一種比較簡潔又美觀的且實現起來也相對簡單。zTree是一個依靠jQuery實現的多功能“樹插件”。它最大的優點是配置靈活，只要id與pid的值相同就可形成一個簡單的父子結構。再加上免費開源，使用zTree的人越來越多。
效果圖如下
首先你需要知道AngularJS的雙向數據綁定是什么才可以更好的理解下面的代碼，想了很久才想出用下面的代碼來實現左側菜單樹形結構
要實現上面的功能你需要操作如下步驟：
在HTML標簽內添加ng-app，讓AngularJS掌管整個HTML文檔
<html lang="en" ng-app="myApp">
myApp是我自己創建的模塊
整個菜單的標簽如下
<div id="left-menu" ng-controller="Left-navigation" class="col-sm-2" style="margin-top: 50px"> <ul> <!-- 儀表盤 --> <li> <!-- 讓每一個一級菜單綁定一個函數navFunc，并且傳入一個指定的字符串 --> <a href="" ng-click="navFunc('dashboard')">儀表盤</a> </li> <!-- 主機 --> <li> <span><a ng-click="navFunc('hosts')" href="">主機</a></span> <!-- 如果要顯示二級菜單，則navAction必須等于制定的字符串，這個是自己定義的，navAction是在controller中創建的 --> <ul ng-show="navAction === 'hosts'"> <li><a href="">主機</a></li> <li><a href="">分組</a></li> </ul> </li> <!-- 容器 --> <li> <a href="" ng-click="navFunc('container')">容器</a> </li> <!-- 模板 --> <li> <span><a href="" ng-click="navFunc('template')">模板</a></span> <ul ng-show="navAction === 'template'"> <li><a href="">監控</a></li> <li><a href="">裝機</a></li> </ul> </li> <!-- 用戶 --> <li> <span><a href="" ng-click="navFunc('users')">用戶</a></span> <ul ng-show="navAction === 'users'"> <li><a href="">修改資料</a></li> <li><a href="">修改密碼</a></li> <li><a href="">添加用戶</a></li> <li><a href="">消息</a></li> </ul> </li> <!-- 配置 --> <li> <a href="" ng-click="navFunc('configuration')">配置</a> </li> </ul></div>JS代碼如下
// 創建myApp模塊var myApp = angular.module('myApp', [])// 創建一個controller，名為Left-navigationmyApp.controller('Left-navigation', ['$scope', function ($scope) { // 定義一個函數navFunc， 接受一個參數 $scope.navFunc = function (arg) { // 讓navAction變量等于函數傳入過來的值arg $scope.navAction = arg; };}]);總結
整體的思路其實就是點擊一級導航的時執行一個函數，并把一級導航的名稱發送給函數，然后二級導航在navAction變量等于它的上級導航的時候就顯示，否則就隱藏。以上就是這篇文章的全部內容，希望能對大家的學習或者工作帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
