création menu horizontal avec AngularJS

Question

Je veux créer un menu comme this mais sans utiliser ng-repeat:

<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> 

le problème est que je n'ai pas trouvé un moyen de passer le paramètre à cette fonction showChilds (la courant li) J'ai essayé de travailler avec id mais il ne fonctionne pas:

    <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> 

et mon contrôleur ne contiendra que cette fonction

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

Je ne veux plus utiliser $ scope.items

Answer 1

J'ai mis à jour votre HTML. Si vous n'utilisez pas ng-repeat, vous pouvez utiliser ng-init pour initialiser une variable et basculer cette variable sur ng-click pour afficher/masquer les sous-menus. Votre échantillon mis à jour est

<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>