嵌套ng-repeat中ng-show失效问题求助

先帮你捋清楚问题出在哪哈：

1. 初始代码的核心问题：ng-show不需要插值语法 #

AngularJS的指令（比如ng-show）本身就支持直接绑定表达式，完全不需要用{{}}包裹。你初始代码里外层ng-show="{{menu.view}}"能生效其实是巧合，Angular会把插值后的结果转成布尔值，但这不是正确的写法。内层ng-show="{{submenu.view}}"失效，大概率是因为插值后的数据绑定出现了延迟或者解析异常。

2. 修改后下拉消失的原因：ng-repeat遍历对象写错了 #

你修改后的代码里，内层ng-repeat写成了ng-repeat="submenu in menus.submenu"——这里的menus是整个数组，它根本没有submenu属性！外层循环是menu in menus，每个menu才包含submenu数组，所以内层应该遍历menu.submenu才对，这才是当前父菜单对应的子菜单列表。

修正后的完整代码 #

<li class="nav-item nav-dropdown" ng-repeat="menu in menus" 
    ng-class="{open: $state.includes(menu.mainurl)}" 
    ng-show="menu.view"> 
  <a class="nav-link nav-dropdown-toggle" 
     ng-class="{active: $state.includes(menu.mainurl)}" 
     href="#">
    <i class="{{menu.icon}}"></i> {{menu.name}}
  </a> 
  <ul class="nav-dropdown-items"> 
    <li class="nav-item" ui-sref-active="linkactive" 
        ng-repeat="submenu in menu.submenu" 
        ng-show="submenu.view"> 
      <a class="nav-link" ui-sref="{{submenu.url}}" href=""> 
        {{submenu.name}} List
      </a> 
    </li> 
  </ul> 
</li>

额外优化小细节 #

• $state.includes(menu.mainurl)这里也不需要用{{}}，直接传变量menu.mainurl就行，因为$state.includes方法接受字符串参数，Angular会直接解析表达式里的变量，这样写法更规范。
• 你的JSON数据里submenu数组最后多了一个逗号，虽然大部分JS引擎能容忍，但建议去掉，避免潜在的语法错误：

$scope.menus= [ 
  { 
    name: 'Organization', 
    mainurl: 'app.organization', 
    icon: 'icon-globe', 
    view: true, 
    submenu: [ 
      { name: 'Product', url: 'app.organization.prodcuct', view: false}, 
      { name: 'List', url: 'app.organization.list', view: false }, 
      { name: 'Item', url: 'app.organization.item', view: false } // 去掉这里的多余逗号
    ] 
  } 
];

这样修改后，内层的ng-show应该就能正常根据submenu.view的值显示/隐藏子菜单了，下拉菜单也能正确渲染出来。

内容的提问来源于stack exchange，提问作者Steve