angularjs - 使用 ng-repeat 切换菜单

Question

我有一个侧边栏，其中包含公司的切换菜单。我从 api 获取公司数据并将其打印出来。每个公司都有相同的两个副标题“文档”和“添加新文档”。

我使用 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');

   };

但是每当我单击任何公司的“添加新文档”或“文档”时，此代码都会导致菜单关闭。

任何帮助对我来说都是很大的!

谢谢， 布拉克

Answer 1

正如我在评论中所写:您应该尽可能避免使用 jQuery 丑化您的 Angular 代码。

我建议使用以下替代方案:

<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 时，这将存储它:$scope.currentOpen.companyId，并将添加 open > 类(如果它与 ngRepeat 循环内的同一公司 ID 匹配)。

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