Question

我有一个带有公司切换菜单的侧边栏。我从api获取公司数据并将其打印出来。每家公司都有相同的两个副标题＆＃34;文件＆＃34;和＆＃34;添加新文件＆＃34;。

我使用ng-repeat将所有公司打印到侧边栏。我无法找到任何解决方案来切换这些菜单。

我发现的最后一件事是：

    <li data-ng-click="toggleMenu($event)" ng-repeat="company in companies" >
       <a class="nav-submenu" data-toggle="nav-submenu" href="#">
           <span class="sidebar-mini-hide">{{company.name}}</span>
       </a>

       <ul>
          <li>
            <a data-ui-sref="{{company.id}}" data-ui-sref-active="active">
                <i class="fa fa-file-text-o"></i>Company's Documents
            </a>
          </li>

          <li>
            <a data-ui-sref="{{company.id}}" data-ui-sref-active="active">
               <i class="fa fa-plus"></i>Add New Document
            </a>
          </li>
        </ul>
  </li>

这是Js代码：

   $scope.toggleMenu = function($event){

     $($event.currentTarget).toggleClass('open');
     $($event.currentTarget).siblings().removeClass('open');

   };

但是这个代码会导致菜单关闭，只要我点击＆＃34;添加新文件＆＃34;或＆＃34;文件＆＃34;任何公司。

任何帮助对我来说都很棒！

谢谢，布拉克

Answer 1

正如我在评论中写的那样：你应该尽可能地避免用jQuery 来改变你的角度代码。

我建议以下作为替代方案：

<li ng-class="{open: company.isOpen}" ng-repeat="company in companies" >
   <a ng-click="company.isOpen = !company.isOpen" class="nav-submenu" data-toggle="nav-submenu" href="#">
       <span class="sidebar-mini-hide">{{company.name}}</span>
   </a>

但正如您所说，如果您点击其他公司菜单，它就不会接近菜单。

所以这是一个类似但不同的方法：

<li ng-class="{open: currentOpen.companyId == company.id}" ng-repeat="company in companies" >
   <a ng-click="currentOpen.companyId = currentOpen.companyId == company.id ? null : company.id" class="nav-submenu" data-toggle="nav-submenu" href="#">
       <span class="sidebar-mini-hide">{{company.name}}</span>
   </a>

当您在对象中点击公司ID 时会存储公司ID ：$scope.currentOpen.companyId如果匹配到同一公司ID，则会添加open类ngRepeat循环。

工作示例：https://jsfiddle.net/jsv2q4bm/

使用ng-repeat切换菜单

1 个答案: