Question

我还在学习，所以任何建议或改进都将不胜感激！我希望使用我构建的服务为我的Angular App构建一个导航，如果它可用的话。

功能快速摘要：

用户MouseOver父项目
“活动父项”下的子菜单项显示

以下是我目前的服务结构：

app.factory("NavigationService", function () {
    var e = [{    
        title: "Parent1",
        type: "parentitem",
        children: [{
            title: "SubofParent",
            type: "subitem",
            href: "/location"
        }]
    }, {
        title: "Parent2",
        type: "parentitem",
        children: [{
            title: "SubofParent",
            type: "subitem",
            href: "/location"
        }]
    }, {
        title: "Parent3",
        type: "parentitem",
        children: [{
            title: "SubofParent",
            type: "subitem",
            href: "/location"
        }]
    }
    }];
});

正如你可以看到它的一个非常简单的结构，但我想知道的是我如何使用这个结构来重复父项，然后在悬停上显示SubItems在特定的父项上，如果这有意义的话？

我不确定如何构建控制器来处理此方法。关于如何实现这一目标的任何建议都会很棒。

Answer 1

<li ng-repeat="item in data" >
          <ul ng-mouseover="isChildrenVisible=true" ng-mouseleave= "isChildrenVisible=false"> {{item.title}}</ul> //parent element                
          <ul ng-show="isChildrenVisible">
                <li ng-repeat="child in item.children "> //child element
                    <p>{{child.title}}</p>
                </li>
          </ul>
  </li>

这里我默认隐藏子元素（初始化isChildrenVisible varible为false）。当用户将鼠标悬停在父元素上时，我将使 isChildrenVisible = true ，并且在鼠标离开时，我将此变量设为false。

使用Factory显示应用程序的导航？

1 个答案: