javascript - 需要用Angular制作父子菜单

Question

我见过很多使用静态值的例子，但我一直找不到像我的情况的例子。我的数据返回如下:

    data = [
        {
            MenuId = 1,
            MenuName = "Contractor Management",
        OrderId = 1,
        ParentId = 0


        },
        {
            MenuId = 2,
            MenuName = "Some Other Management",
        OrderId = 1,
        ParentId = 1


        },
{
            MenuId = 3,
            MenuName = "Some Menu Name",
        OrderId = 2,
        ParentId = 0


        },
{
            MenuId = 4,
            MenuName = "Another Menu Name",
        OrderId = 2,
        ParentId = 3


        },
{
            MenuId = 5,
            MenuName = "Blah Management",
        OrderId = 2,
        ParentId = 3


        },

    ];

我读到，使用 ng-repeat 显示层次结构的最佳方法是按以下顺序排列:

Parent = [{MenuId:1, MenuName:Contractors, ParentId=0, OrderId =1, Children=[{MenuId:2, MenuName: blahblah, ParentId = 1, OrderId = 1}, etc.]

当我获取数据时，我能够隔离父级和子级，因为父级都有一个parentId = 0，但我不知道如何让子级进入每个父级。我尝试了以下方法，但当然，它不起作用:

 getmenuItems();
function getmenuItems() {
    debugger;
    generalsearchService.getMenuItems()
     .success(function (data) {
         //$scope.menuItems = data;
         $scope.parents = [];
         $scope.children = [];
         $scope.parents[0].children = [];
         for (var i = 0; i < data.length; i++)
         {
             if(data[i].ParentId == 0)
             {
                 $scope.parents.push(data[i]);

             }
             else {
                 $scope.children.push(data[i]);
             }
         }
         for (var i = 0; i < $scope.parents.length; i++)
         {
             for(var x = 0; x <$scope.children.length; x++)
             {
                 if($scope.children[x].ParentId = $scope.parents[i].WebMenuId)
                 {
                     $scope.parents[i].children.push($scope.children[x]);
                 }
             }
         }

         return $scope.parents;
     });
};

在我的 HTML 中:

  <ul>
        <li ng-repeat-start="parent in parents" class="header">{{parent.MenuName}}</li>
        <li ng-repeat="child in parents.children" class="item">{{child.MenuName}}</li>
        <li ng-repeat-end><br /></li>
    </ul>

JavaScript 的第一部分可以很好地隔离 parent 和 child ，但第二部分会出错。有人可以帮帮我吗？我对 Angular 和 Javascript 很陌生，但我需要让它在周二到期的项目中发挥作用。非常感谢任何帮助。

Answer 1

检查此 plunkr 是否有解决您问题的方法: http://plnkr.co/edit/4XddPGvfjqkbo3VIM3QA?p=preview

这个想法是创建一个包含多个级别对象的单个 json 对象:第一级是父级，第二级是子级列表。这可以通过首先迭代列表并创建仅包含父级级别的 json，然后再次迭代以将子级与其父级匹配来完成:

    $scope.menu = [];
    angular.forEach(data, function(value, key) {
      if (value.ParentId == 0){
        $scope.menu.push(value);
       } 
     });

   angular.forEach( data, function(value, key) {
    if (value.ParentId != 0){
       angular.forEach($scope.menu, function(value2, key2) {
        if (value.ParentId == value2.MenuId){
          if(value2.children == undefined){
            value2.children = [];
            value2.showChildren = false;
          } 
          value2.children.push(value);
        }
      });
    }
  });

html 是:

<ul>
    <li ng-repeat="parent in menu" class="header">{{parent.MenuName}}<ul>
    <li ng-repeat="child in parent.children" class="item">{{child.MenuName}}</li></ul></li>
</ul>