ng-show 不适用于嵌套的 ng-repeat答案

【问题标题】：ng-show not working with nested ng-repeatng-show 不适用于嵌套的 ng-repeat
【发布时间】：2018-11-05 18:37:31
【问题描述】：

这似乎是一个重复的问题，但事实并非如此。我坚持了一段时间。嗯，这是我的代码。

<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" >
                        <a class="nav-link" ui-sref="{{submenu.url}}" href="" ng-show="{{submenu.view}}"> {{submenu.name}} List</a>
                    </li>
                </ul>
            </li>

这是我的 json：

$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-repeat 中的父<li> 中的外部ng-show 似乎工作正常，但在内部ng-repeat 中不起作用。我完全不知道为什么会这样。请帮助我了解堆栈社区。！

更新
按照 sajeetharan 先生的说法更改了代码，

<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 menus.submenu" ng-show="submenu.view">
                        <a class="nav-link" ui-sref="{{submenu.url}}" href=""> {{submenu.name}} List</a>                           
                    </li>
                </ul>
            </li>

现在整个drop都不会显示了

【问题讨论】：

标签： angularjs angularjs-ng-repeat ng-show angularjs-ng-show

【解决方案1】：

您应该删除注释并只使用范围变量ng-show="menu.view"

<li class="nav-item nav-dropdown" ng-repeat="menu in menus" ng-class="{open: $state.includes('{{menu.mainurl}}')}" ng-show="menu.view">

演示

var demoApp = angular.module('demoApp',[]);
demoApp.controller('testCtrl',function($scope){
$scope.menus= [
  {
    "name": "Organization",
    "mainurl": "'app.organization",
    "icon": "icon-globe",
    "view": true,
    "submenu": [
      {
        "name": "Product",
        "url": "app.organization.prodcuct",
        "view": true
      },
      {
        "name": "List",
        "url": "app.organization.list",
        "view": false
      },
      {
        "name": "Item",
        "url": "app.organization.item",
        "view": false
      }
    ]
  }
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demoApp" ng-controller="testCtrl">
<li class="nav-item nav-dropdown" ng-repeat="menu in menus" ng-show="menu.view">
                <a class="nav-link nav-dropdown-toggle" 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" >
                        <a class="nav-link"  href="" ng-show="submenu.view"> {{submenu.name}} List</a>
                    </li>
                </ul>
            </li>
</body>

【讨论】：

感谢您的快速回复@Sajeetharan 先生。删除了注释并将 ng-repeat 更改为您所说的，现在整个子菜单都不会显示
是的。谢谢楼主

【解决方案2】：

我在你的代码中看到了你正在使用的

ng-repeat="submenu in menu.submenu"

但你的对象有

$scope.menus

所以这里你应该修改的代码是

ng-repeat="submenu in menus.submenu"

【讨论】：