angularjsangularjs-ng-repeatng-showangularjs-ng-show

ng-show not working with nested ng-repeat

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

Solution

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