需要使用Angular创建父子菜单

时间:2015-09-05 18:24:05

标签: javascript angularjs

我已经看到很多使用静态值的例子但是我找不到像我的情况那样的例子。我的数据会像这样回来:

    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的第一部分适用于隔离父母和孩子,但第二部分错误。有人可以帮帮我吗?我是Angular和Javascript的新手,但我需要让这个项目适用于周二到期的项目。非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

使用解决方案解决此问题: White area on fixed background when scrolling on ios

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

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

而html将是:

{{1}}