快捷導(dǎo)航

AngularJS實現(xiàn)樹形結(jié)構(gòu)(ztree)菜單示例代碼

更新時間：2016年09月18日 11:08:06 投稿：daisy

這篇文章運用示例代碼給大家詳細介紹了利用AngularJS如何實現(xiàn)樹形結(jié)構(gòu)(ztree)菜單，文中僅用了幾行AngularJS代碼就是了這個功能，對大家日常開發(fā)很有幫助，有需要的朋友們可以參考借鑒，下面來一起看看吧。

樹形結(jié)構(gòu)

樹形結(jié)構(gòu)有多種形式和實現(xiàn)方式，zTree可以說得上是一種比較簡潔又美觀的且實現(xiàn)起來也相對簡單。zTree是一個依靠jQuery實現(xiàn)的多功能“樹插件”。它最大的優(yōu)點是配置靈活，只要id與pid的值相同就可形成一個簡單的父子結(jié)構(gòu)。再加上免費開源，使用zTree的人越來越多。

效果圖如下

首先你需要知道AngularJS的雙向數(shù)據(jù)綁定是什么才可以更好的理解下面的代碼，想了很久才想出用下面的代碼來實現(xiàn)左側(cè)菜單樹形結(jié)構(gòu)

要實現(xiàn)上面的功能你需要操作如下步驟：

在HTML標簽內(nèi)添加ng-app，讓AngularJS掌管整個HTML文檔

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

myApp是我自己創(chuàng)建的模塊

整個菜單的標簽如下

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

    <!-- 儀表盤 -->
    <li>
  <!-- 讓每一個一級菜單綁定一個函數(shù)navFunc，并且傳入一個指定的字符串 -->
      <a href="" ng-click="navFunc('dashboard')">儀表盤</a>
    </li>

    <!-- 主機 -->
    <li>
      <span><a ng-click="navFunc('hosts')" href="">主機</a></span>
      <!-- 如果要顯示二級菜單，則navAction必須等于制定的字符串，這個是自己定義的，navAction是在controller中創(chuàng)建的 -->
  <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="">監(jiān)控</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代碼如下

// 創(chuàng)建myApp模塊
var myApp = angular.module('myApp', [])

// 創(chuàng)建一個controller，名為Left-navigation
myApp.controller('Left-navigation', ['$scope', function ($scope) {
  // 定義一個函數(shù)navFunc， 接受一個參數(shù)
 $scope.navFunc = function (arg) {
 // 讓navAction變量等于函數(shù)傳入過來的值arg
    $scope.navAction = arg;
  };
}]);

總結(jié)

整體的思路其實就是點擊一級導(dǎo)航的時執(zhí)行一個函數(shù)，并把一級導(dǎo)航的名稱發(fā)送給函數(shù)，然后二級導(dǎo)航在navAction變量等于它的上級導(dǎo)航的時候就顯示，否則就隱藏。以上就是這篇文章的全部內(nèi)容，希望能對大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: