ng-show not working with nested ng-repeat

Question

ng-show not working with nested ng-repeat

198 Views Asked by Steve At 26 May 2018 at 16:28

This might seem like a repeated question but it isn't. I am stuck on this for a while. Well this is my code.

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

and this is my 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 },
                ]
            },
]

The outer ng-show in parent <li> in outer ng-repeat seems to be working fine, but it is not working in the inner ng-repeat. I am totally out of clue why that's happening. Please help me out in knowing that stack community.!

UPDATE
changed the code as said by sajeetharan sir,

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

now the whole drop won't show

Original Q&A

There are 2 best solutions below

Yagnesh Khamar On 26 May 2018 at 16:32

I have seen in your code that you are using

ng-repeat="submenu in menu.submenu"

but your object have

$scope.menus

So the code here you should change is

ng-repeat="submenu in menus.submenu"

**Sajeetharan** · Accepted Answer · 2018-05-26T16:29:34.437000

You should remove the annotation and just use the scope variable 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">

DEMO

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>

ng-show not working with nested ng-repeat

There are 2 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-REPEAT

Related Questions in NG-SHOW

Related Questions in ANGULARJS-NG-SHOW

Trending Questions

Popular # Hahtags

Popular Questions