AngularJS でツリー構造 (ztree) メニューを実装するサンプルコード-jsチュートリアル-php.cn

AngularJS でツリー構造 (ztree) メニューを実装するサンプルコード

高洛峰

リリース： 2017-01-10 12:54:56

オリジナル

1920 人が閲覧しました

ツリー構造

ツリー構造には多くの形式と実装方法があり、zTree は比較的シンプルで美しいものと言え、実装も比較的簡単です。 zTreeは、jQueryで実装された多機能な「ツリープラグイン」です。最大の利点は、id と pid の値が同じであれば、単純な親子構造を形成できるという柔軟な構成です。無料のオープンソースと相まって、zTree を使用する人が増えています。

レンダリングは次のとおりです

AngularJS でツリー構造 (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(&#39;dashboard&#39;)">仪表盘</a>
    </li>
 
    <!-- 主机 -->
    <li>
      <span><a ng-click="navFunc(&#39;hosts&#39;)" href="">主机</a></span>
      <!-- 如果要显示二级菜单，则navAction必须等于制定的字符串，这个是自己定义的，navAction是在controller中创建的 -->
  <ul ng-show="navAction === &#39;hosts&#39;">
        <li><a href="">主机</a></li>
        <li><a href="">分组</a></li>
      </ul>
    </li>
 
    <!-- 容器 -->
    <li>
      <a href="" ng-click="navFunc(&#39;container&#39;)">容器</a>
    </li>
 
    <!-- 模板 -->
    <li>
      <span><a href="" ng-click="navFunc(&#39;template&#39;)">模板</a></span>
      <ul ng-show="navAction === &#39;template&#39;">
        <li><a href="">监控</a></li>
        <li><a href="">装机</a></li>
      </ul>
    </li>
 
    <!-- 用户 -->
    <li>
      <span><a href="" ng-click="navFunc(&#39;users&#39;)">用户</a></span>
      <ul ng-show="navAction === &#39;users&#39;">
        <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(&#39;configuration&#39;)">配置</a>
    </li>
 
  </ul>
</div>

ログイン後にコピー

JS コードは次のとおりです

// 创建myApp模块
var myApp = angular.module(&#39;myApp&#39;, [])
 
// 创建一个controller，名为Left-navigation
myApp.controller(&#39;Left-navigation&#39;, [&#39;$scope&#39;, function ($scope) {
  // 定义一个函数navFunc， 接受一个参数
 $scope.navFunc = function (arg) {
 // 让navAction变量等于函数传入过来的值arg
    $scope.navAction = arg;
  };
}]);

ログイン後にコピー

概要

全体的なアイデアは、実際に最初のときに関数を実行することです。レベルナビゲーションがクリックされ、第 1 レベルのナビゲーションの名前が関数に送信されます。その後、第 2 レベルのナビゲーションの navAction 変数がその上位ナビゲーションの変数と等しくなります。必要な場合は表示され、そうでない場合は非表示になります。以上がこの記事の内容です。皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問がございましたら、メッセージを残してください。

AngularJS のツリー構造 (ztree) メニューの実装サンプルコード関連記事の詳細については、PHP 中国語 Web サイトに注目してください。