javascript - 需要帮助编写 Else/If 语句部分 - 如果单击的 li 没有子项，则重置 li 图标的状态

Question

下面的代码在没有 (2nd)else if 语句的情况下工作正常，一旦我单击 li，图标将变为 arrow_dropdown，如果我再次单击，它将变为材料设计的展开_more 图标。需要帮助写作-> 当我单击没有子项的 li 时，将所有 li 图标（从 arrow_dropdown）重置为展开_more。基本上现在发生的事情是当我单击没有子菜单的 li 时，带有 submenuItems 的 li 关闭，但是当 li 关闭时，图标仍然保持为 arrow_dropdown。

$scope.toggleSubNav = function(item) {
  if (item.subItems) {
    $scope.itemClicked = $scope.clicked = !$scope.clicked;

    //if clicked first time change unfold to arrow_dropdown i.e. open state
    if ($scope.itemClicked === true && item.subicon === 'unfold_more') {
      item.subicon = 'arrow_drop_down'
    }
    //need help writing this part
    //if clicked on li with no subItems, change icon of li's to unfold_more i.e. closed
    else if ($scope.itemClicked === true && item.subItems === false) {
      item.subicon = 'unfold_more'
    }
    // if clicked 2nd time change arrow_dropdown to unfold i.e. closed state
    else {
      item.subicon = 'unfold_more'
    }
  }
};

我的控制器看起来像这样 -

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

  // Must use a wrapper object, otherwise "activeItem" won't work
  $scope.states = {};
  $scope.states.activeItem = '';
  $scope.items = [{
    id: 'item1',
    title: 'Dashboard',
    icon: 'dashboard',
    subicon: 'unfold_more',
    route: 'dashboard',
    subItems: [{
        title: 'Page Visitors',
        subroute: 'page-visitors',
      },
      {
        title: 'Post Performace',
        subroute: 'post-performance',
      },
      {
        title: 'Team Overall',
        // subroute: '/team-overall',
      }
    ]
  }, {
    id: 'item2',
    title: 'Calendar',
    icon: 'calendar_today',
  }, {
    id: 'item3',
    title: 'Inbox',
    icon: 'inbox',
    subicon: 'unfold_more',
    subItems: [{
        title: 'New Mail',
        // subroute: '/new-mail',

      },
      {
        title: 'Scoial',
        // subroute: '/new-social',
      },
      {
        title: 'Updates',
        // subroute: '/new-updates',
      }
    ]
  }, {
    id: 'item4',
    title: 'Invoicing',
    icon: 'insert_drive_file',
  }];
});

在这里你可以看到我的 html

<ul class="navigation">
  <div class="" layout="column">
    <li md-ink-ripple="#ebeef4"
    ng-repeat="item in items"
    class="item {{item.id}}" 
    ng-click="states.activeItem=item.title;
              toggleSubNav(item)">
      <span>
         <i class="material-icons md-24 center-icons">{{item.icon}}</i>
      </span>
        <a class="title" ng-href="#!{{item.route}}">{{item.title}}</a>
      <span>
                        <!--change the icons {{item.subicon}} inside i tag -->
      <i ng-class="icon"
      class="material-icons md-18 subicon-openstate"
      id="test-icons">{{item.subicon}}</i>
       </span>
       
      <ul class="submenu" id="submenu-item-hover" ng-if="itemClicked && states.activeItem === item.title && item.subItems">
        <li ng-repeat="subItem in item.subItems" class="subItem">
          <!-- ng-href="#!{{subItem.subroute}}" -->
          <a href="#!{{subItem.subroute}}">{{subItem.title}}</a>
        </li>
      </ul>
    </li>
  </div>
</ul>

标签： javascriptangularjs