javascript - 从 JSON 数组生成 HTML 列表

Question

使用 angularJS 我正在尝试构建一个将用作菜单的列表。我有一个 JSON 数组，必须根据 JSON 字段的条件构建菜单:

在我的 Controller 中，现在我有这个:

获取 JSON:

$scope.cartoList = [];
$http.get('frList.json')
.success(function(data) { 
    $scope.cartoList = data;
    $scope.buildMenu();
})
.error(function(data) { 
    console.log("Error while getting json.");
})

初始化菜单列表:

    $scope.initMenu = function () {
    for (var i = 0; i < $scope.cartoList.length; i++) {
        if ($scope.cartoList[i].informationSystem != "" && $scope.ISList.indexOf($scope.cartoList[i].informationSystem) === -1)
            $scope.ISList.push($scope.cartoList[i].informationSystem);
        if ($scope.cartoList[i].macroProcess != "" && $scope.macroProcessList.indexOf($scope.cartoList[i].macroProcess) === -1)
            $scope.macroProcessList.push($scope.cartoList[i].macroProcess);
    }
}

JSON 示例:

[
{   "area" : "Middle",
    "block" : "Position",
    "created" : "2015-6-15",
    "defaultZoom" : "1",
    "displayName" : "Architecture",
    "fileName" : "AA_APK",
    "informationSystem" : "A Group",
    "lastupdate" : "2015-6-15",
    "level" : "Block",
    "macroProcess" : "",
    "type" : "AA"
  },
  { "area" : "",
"block" : "",
"created" : "2015-6-15",
"defaultZoom" : "1",
"displayName" : "Processus order VM",
"fileName" : "AM_Process_order_VM",
"informationSystem" : "A Group",
"lastupdate" : "2015-6-15",
"level" : "",
"macroProcess" : "Deal period",
"type" : "AM"
 },
 ...
]

HTML:

<ul class="sidebar-menu slimscroll">
<li class="treeview" ng-repeat="IS in ISList"><a href="javascript:void(0)"> <i class="fa fa-folder"></i>{{IS}} <i class="fa fa-angle-left pull-right"></i></a>
        <ul class="treeview-menu">

          <li class="treeview"><a href="javascript:void(0)"> <i class="fa fa-folder"></i>Processus<i class="fa fa-angle-left pull-right"></i></a>
            <ul class="treeview-menu">
              <li class="treeview" ng-repeat="mProcess in macroProcessList"><a href="javascript:void(0)"><i class="fa fa-folder"></i>{{mProcess}}<i class="fa fa-angle-left pull-right"></i></a>
                <ul class="treeview-menu">
                  <li ng-repeat="carto in cartoList" ng-if="carto.type == 'AM' && carto.macroProcess == mProcess && carto.informationSystem == IS"><a href="javascript:void(0)" ng-click="changeSVG(carto.fileName)"><i class="fa fa-sitemap"></i>{{carto.displayName}}</a></li>
                </ul>
              </li>
            </ul>
          </li>

          <!-- Other <li> will come here -->

        </ul>
</li>
</ul>

问题是当我单击 IS 元素时，菜单不会下拉。

treeview 和 treeview-menu 来 self 正在使用的模板，您可以在这里找到:https://almsaeedstudio.com/themes/AdminLTE/index.html

但我认为这没有关系。

编辑:菜单下拉列表由 JQuery 处理，因此可能是相关的。也许由于 JQuery 和 Angular 之间的某些冲突而未捕获该事件？

这应该是相关部分:

$.AdminLTE.tree = function (menu) {
var _this = this;

$("li a", $(menu)).on('click', function (e) {
  //Get the clicked link and the next element
  var $this = $(this);
  var checkElement = $this.next();

  //Check if the next element is a menu and is visible
  if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
    //Close the menu
    checkElement.slideUp('normal', function () {
      checkElement.removeClass('menu-open');
      //Fix the layout in case the sidebar stretches over the height of the window
      //_this.layout.fix();
    });
    checkElement.parent("li").removeClass("active");
  }
  //If the menu is not visible
  else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
    //Get the parent menu
    var parent = $this.parents('ul').first();
    //Close all open menus within the parent
    var ul = parent.find('ul:visible').slideUp('normal');
    //Remove the menu-open class from the parent
    ul.removeClass('menu-open');
    //Get the parent li
    var parent_li = $this.parent("li");

    //Open the target menu and add the menu-open class
    checkElement.slideDown('normal', function () {
      //Add the class active to the parent li
      checkElement.addClass('menu-open');
      parent.find('li.active').removeClass('active');
      parent_li.addClass('active');
      //Fix the layout in case the sidebar stretches over the height of the window
      _this.layout.fix();
    });
  }
  //if this isn't a link, prevent the page from being redirected
  if (checkElement.is('.treeview-menu')) {
    e.preventDefault();
  }
});
};

Answer 1

我认为你对 AngularJS 以及它能为你做什么有一些误解。你要走很长的路才能显示你的菜单，而它应该让你的生活更轻松，我想我可能会澄清 Angular 可以做什么，以便让你的菜单列表继续运行 =)。

AngularJS 有一个 ng-repeat 属性，它允许您访问 Controller 中的数组并为其每个元素显示一些内容。喜欢:

<ul>
    <li ng-repeat="element in list">
        <div class="{{element}}">{{element}}</div>
    </li>
</ul>

这使您可以为作用域内 list 变量中的每个元素创建一个 li 元素。

使用这种功能可以让您在开发阶段更早地看到菜单。从我在您的场景中看到的情况来看，每个元素都有两种可能的结果:它要么是菜单，要么不是菜单，并且元素会根据菜单而变化。查看这个 fiddle 以了解您可以做什么:

http://jsfiddle.net/4xkvq7dj/1/

这个示例非常简单，因此您可以了解可以做什么的基础知识。从那时起，问题就在于找出你想要实现的目标。使用 DOM 在 Controller 中构建菜单并不是 Angular 方式，而且它很快就会变得困惑。您可以在 HTML 中使用 ng-repeat 和其他 Angular Directive(指令)来实现很多事情，因此 View 逻辑保留在 View 中 =)。

祝您的项目好运!