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

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

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

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

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

效果圖如下

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

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

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

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

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

整個(gè)菜單的標(biāo)簽如下

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

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

    <!-- 主機(jī) -->
    <li>
      <span><a ng-click="navFunc('hosts')" href="">主機(jī)</a></span>
      <!-- 如果要顯示二級(jí)菜單，則navAction必須等于制定的字符串，這個(gè)是自己定義的，navAction是在controller中創(chuàng)建的 -->
  <ul ng-show="navAction === 'hosts'">
        <li><a href="">主機(jī)</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="">裝機(jī)</a></li>
      </ul>
    </li>

    <!-- 用戶(hù) -->
    <li>
      <span><a href="" ng-click="navFunc('users')">用戶(hù)</a></span>
      <ul ng-show="navAction === 'users'">
        <li><a href="">修改資料</a></li>
        <li><a href="">修改密碼</a></li>
        <li><a href="">添加用戶(hù)</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)建一個(gè)controller，名為L(zhǎng)eft-navigation
myApp.controller('Left-navigation', ['$scope', function ($scope) {
  // 定義一個(gè)函數(shù)navFunc， 接受一個(gè)參數(shù)
 $scope.navFunc = function (arg) {
 // 讓navAction變量等于函數(shù)傳入過(guò)來(lái)的值arg
    $scope.navAction = arg;
  };
}]);

總結(jié)

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

您可能感興趣的文章: