AngularJS實現樹形結構(ztree)菜單範例程式碼

AngularJS實現樹形結構(ztree)菜單範例程式碼_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

樹形結構

樹形結構有多種形式和實現方式，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變數等於它的上級導航的時候就顯示，否則就隱藏。以上就是這篇文章的全部內容，希望能對大家的學習或者工作帶來一定的協助，如果有疑問大家可以留言交流。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More