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

Question

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

<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 },
                ]
            },
]

外部 <li> 中的外部 ng-show in 外部 ng-repeat 似乎工作正常，但它在内部 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>

现在整个下落都不会显示

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

Answer 2

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

ng-repeat="submenu in menu.submenu"

但是你的对象有

$scope.menus

所以您应该更改的代码是

ng-repeat="submenu in menus.submenu"

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

ng-show not working with nested ng-repeat

angularjs

angularjs-ng-repeat

ng-show

angularjs-ng-show