2014-08-27 66 views
0

我是新手角度捕捉。我有以下要求:角度快速滑出菜单

  1. 滑出菜单左侧
  2. 应包含的子菜单
  3. 子菜单也应该是可折叠的。

角度捕捉是否会提供所有这些功能?

我开始使用角度卡入滑出菜单的示例。 如何在抽屉中给出两个不同的菜单,并且当用户单击菜单1时,主div应显示page1,并且当用户单击menu2时,主div应显示page2。

+0

一些代码分享您的代码,并提供了一个有效的例子,请 – apairet 2014-08-27 22:55:52

回答

1

两个小点:

  • Angular.js是构建单页面应用程序的框架。
  • Snap.js是一个库,提供了一个“货架”像菜单界面。

角度捕捉只是这两个组件的集成。您不限于使用普通的JavaScript来根据用户的点击来显示和隐藏页面上的元素。

而不是告诉你应该怎么弄角对齐专门要做到这一点,这里是实现在角下拉隐藏/显示动作,这与你的Snap.js应用程序实例绝对兼容的方式。

Angular.js Dropdown

function dropdown($scope) { 

    $scope.subitems = [ 
     { 
      title: 'Menu item one', 
      url: '#' 
     }, 
     { 
      title: 'Menu item two', 
      url: '#' 
     }, 
     { 
      title: 'Menu item three', 
      url: '#' 
     }, 
     { 
      title: 'Menu item four', 
      url: '#' 
     } 
    ]; 
} 


<nav class="dropdown-wrap" ng-app ng-controller="dropdown"> 
    <a href="#" class="dropdown-title" ng-click="showDetails = ! showDetails">Dropdown Menu</a> 
    <ul ng-repeat="subitem in subitems" ng-show="showDetails"> 
     <li> 
      <a href="{{subitem.url}}">{{subitem.title}}</a> 
     </li> 
    </ul> 
</nav> 

我先前的一点,你不一定考虑把这个最终都全部解决您的问题。在几行JavaScript中可能有更简单的解决方案,除非菜单项需要动态化,否则我不知道是否会产生额外的开销和调试以使Angular产生可以进行硬编码的标记。

无论哪种方式,我会考虑到您的所有要求,并从那里开始。不要认为这些库是一个限制 - 它们中任何一个都不是不是 JavaScript,因此可能考虑使用其他开箱即用或易于使用浏览器中已有的简单工具的解决方案。

编辑:借用here

+0

非常感谢您pizzasynthesis!对此,我真的非常感激。良好的信息。我会尝试使用angularjs和java脚本来实现。 – user1457957 2014-08-28 05:34:24

+0

如果它对您有用,您应该将答案标记为已接受;) – pizzasynthesis 2014-08-28 13:34:41