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

外部ng-show中的父<li>中的外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 =＆＃34; menu.submenu＆＃34;中的子菜单

但你的对象有

$ scope.menus

所以你应该改变的代码是

菜单中的
ng-repeat =＆＃34;子菜单＆＃34;

ng-show不使用嵌套的ng-repeat

2 个答案: