我如何在点击时激活子菜单

Question

这是我的HTML代码：

<ul>
  <li ng-class="{active : activeTab === 'tab one'}">
    <a href="" ng-click="openTab('tab one')">
      <i class="fa fa-th-large"></i> <span class="nav-label">Manage Students</span> <span class="fa arrow"></span></a>
    <ul class="nav nav-second-level" ng-show="isOpenTab('tab one')">
      <li class="active"><a href="">Student List</a></li>
      <li ><a href="">Create New Students</a></li>

    </ul>
  </li>
  <li ng-class="{active : activeTab === 'tab two'}">
    <a href="" ng-click="openTab('tab two')"><i class="fa fa-th-large"></i> <span class="nav-label">Manage Guardians</span> <span class="fa arrow"></span></a>
    <ul class="nav nav-second-level" ng-show="isOpenTab('tab two')">
      <li ><a ui-sref = "course">Guardian List</a></li>
      <li ><a ui-sref = "header">Create New Guardian</a></li>

    </ul>
  </li>
</ul>

当我点击学生列表时，主要父母列表变为活动状态，子列表变为关闭状态。我也希望子列表有效，并且在点击学生列表时保持打开状态。

当我点击学生列表时，它就会关闭。

这是我的代码：

<li ng-class="{active : activeTab === 'tab one'}">
  <a href="" ng-click="openTab('tab one')"><i class="fa fa-th-large"></i> <span class="nav-label">Manage Students</span> <span class="fa arrow"></span></a>
  <ul class="nav nav-second-level" ng-show="isOpenTab('tab one')">
    <li class="active"><a href="">Student List</a></li>
    <li ><a href="">Create New Students</a></li>

  </ul>
</li>
<li ng-class="{active : activeTab === 'tab two'}">
  <a href="" ng-click="openTab('tab two')"><i class="fa fa-th-large"></i> <span class="nav-label">Manage Guardians</span> <span class="fa arrow"></span></a>
  <ul class="nav nav-second-level" ng-show="isOpenTab('tab two')">
    <li ><a ui-sref = "course">Guardian List</a></li>
    <li ><a ui-sref = "header">Create New Guardian</a></li>

  </ul>
</li>

Angular Code：

app.controller('sidebarCtrl', function ($scope) {

// initiate an array to hold all active tabs
$scope.activeTabs = [];

// check if the tab is active
$scope.isOpenTab = function (tab) {
    // check if this tab is already in the activeTabs array
    if ($scope.activeTabs.indexOf(tab) > -1) {
        // if so, return true
        return true;
    } else {
        // if not, return false
        return false;
    }
}

// function to 'open' a tab
$scope.openTab = function (tab) {

    $scope.activeTab = tab;
   // check if tab is already open
    if ($scope.isOpenTab(tab)) {
       //if it is, remove it from the activeTabs array
        $scope.activeTabs.splice($scope.activeTabs.indexOf(tab), 1);
    } else {
        // remove all active tabs before pushing current tab
           for (var i = $scope.activeTabs.length - 1; i >= 0; i--) {
            if (!$scope.activeTabs[i].value) {
                $scope.activeTabs.splice(i, 1);
            }
        }
        // if it's not, add it!
        $scope.activeTabs.push(tab);
    }
}});