AngularJSでツリー構造(ztree)メニューの実例コードを実現する

ツリー構造

ツリー構造には多くの形式と実現方法があります。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はコントローラーで作成されています -->
  <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', [])
// Leftという名前のcontrollerを作成する-navigation
myApp.controller('Left-navigation', ['$scope', function ($scope) {
  // navFunc関数を定義し、引数1つを受け取る
 $scope.navFunc = function (arg) {
 // navAction変数を関数に渡される値argに設定する
    $scope.navAction = arg;
  }
}

まとめ

全体の考え方は、一级ナビゲーションをクリックしたときに関数を実行し、一级ナビゲーションの名前を関数に送信し、二级ナビゲーションがnavAction変数がその上位ナビゲーションと一致する場合に表示され、一致しない場合に非表示になります。これがこの記事のすべてです。皆様の学習や仕事に少しでも役立つことを願っています。何か疑問があれば、コメントを残してください。

基本チュートリアル