需要制作帶角度的親子菜單

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.]

當我獲得數據時，我能夠隔離父級和子級，因為Parents都具有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的第一部分可以很好地隔離父母和孩子，但是第二部分會出錯。 有人可以幫幫我嗎？ 我是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>