创建水平的菜单与angularjs

Question

我想创建一个菜单像this但没有使用NG-重复：

<ul class="sidebar-navi"> 
    <li ng-repeat="item in items" ng-click="showChilds(item)"> 
     <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>{{item.name}}</a> 
     <ul> 
      <li ng-show="item.active"> 
       <span>First</span> 
      </li> 
      <li ng-show="item.active"> 
       <span>Second</span> 
      </li> 
     </ul> 
    </li> 
</ul> 

的问题是，我没有找到一个方法来传递参数给这个函数showChilds（中目前李）我试着用ID来工作，但没有奏效：

    <ul class="sidebar-navi"> 
         <li id="first" ng-click="showChilds(first)"> 
          <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1</a> 
          <ul> 
           <li ng-show="first.active"> 
            <span>First</span> 
           </li> 
           <li ng-show="first.active"> 
            <span>Second</span> 
           </li> 
          </ul> 
         </li> 
         <li id="second" ng-click="showChilds(second)"> 
          <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2</a> 
          <ul> 
           <li ng-show="second.active"> 
            <span>First</span> 
           </li> 
           <li ng-show="second.active"> 
            <span>Second</span> 
           </li> 
          </ul> 
         </li> 
        </ul> 

和我的控制器将只包含此功能

$scope.showChilds = function (item) { 
    item.active = !item.active 
    } 

我不想再使用$ scope.items

Answer 1

我已更新您的HTML。如果你不使用ng-repeat，那么你可以使用ng-init初始化一个变量，并在ng-click上切换该变量以显示/隐藏子菜单。您更新的示例是here

<ul class="sidebar-navi"> 
        <li id="first" ng-click="first = !first" ng-init="first = false"> 
         <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1</a> 
         <ul> 
          <li ng-show="first"> 
           <span>First</span> 
          </li> 
          <li ng-show="first"> 
           <span>Second</span> 
          </li> 
         </ul> 
        </li> 
        <li id="second" ng-click="second = !second" ng-init="second = false"> 
         <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2</a> 
         <ul> 
          <li ng-show="second"> 
           <span>First</span> 
          </li> 
          <li ng-show="second"> 
           <span>Second</span> 
          </li> 
         </ul> 
        </li> 
       </ul>