English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Пример кода реализации структуры дерева меню (ztree) в AngularJS

Структура дерева

Структура дерева имеет множество форм и методов реализации, zTree можно считать одним из более простых и привлекательных, а также легко реализуемых. zTree — это многофункциональный «плагин дерева», реализованный на jQuery. Её最主要的优点是配置灵活,всего лишь идентичное значение id и pid позволяет сформировать простую структуру «родитель-дить». Также, благодаря бесплатному и открытом коду,越来越多的人开始使用zTree.

Эффект как на рисунке

Сначала вам нужно понять, что такое двусторонняя привязка данных AngularJS, чтобы лучше понять下面的 код,想了 долго, и только с помощью этого кода я смог реализовать иерархическую структуру меню слева

Чтобы реализовать上面的 функцию, вам нужно выполнить следующие шаги:

Добавьте ng-app в тег HTML, чтобы 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 должен быть равен определенной строке, это我自己 define, 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', [])
// Создайте контроллер, названный Left-navigation
myApp.controller('Left-navigation', ['$scope', function ($scope) {
  // Определите функцию navFunc, принимающую один параметр
 $scope.navFunc = function (arg) {
 // Пусть переменная navAction равна переданному значению arg
    $scope.navAction = arg;
  };
};

Резюме

Общий подход заключается в том, что при нажатии на уровень навигации вызывается функция, и имя уровня навигации отправляется функции, а二级导航 отображается, когда переменная navAction равна上级 навигации, в противном случае он скрыт. Это и есть весь контент статьи, я надеюсь, что он принесет вам определенную пользу в учебе или работе, если у вас есть вопросы, вы можете оставить комментарий для обсуждения.

Основной учебник
Вам может понравиться