AngularJS - How to display message when nested child ngrepeat is empty.

Question

I have a Parent ID/Child ID ng-repeat that where I am trying to display a message when it's child is empty. Cant quite get this to work correctly. Here is what I have:

(function() {
  'use strict';

  angular
    .module('exampleApp', [])
    .controller('ExampleController', ExampleController);

  function ExampleController() {
    var vm = this;
    vm.Parent_data = [{
      "id": "1234",
      "ParentDetails": "Data and stuff here"
    }, {
      "id": "5423",
      "ParentDetails": "Data and stuff here"
    }, {
      "id": "65342",
      "ParentDetails": "Data and stuff here"
    },{
      "id": "7890",
      "ParentDetails": "Data and stuff here"        
    }]
    vm.Child_data = [{
      "id": "1",
      "listId": "1234",
      "ChildDetails": "Data and stuff here"
    }, {
      "id": "2",
      "listId": "5423",
      "ChildDetails": "Data and stuff here"
    }]
  }
  ExampleController.$inject = [];
})();

Here is the HTML markup example:

<!DOCTYPE html>
<html ng-app='exampleApp'>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>

<body ng-controller="ExampleController as vm">

    <table> 
        <tbody ng-repeat="parent in vm.Parent_data">
            <tr>
                <td> Parent details here: {{ parent.ParentDetails }} </td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tbody ng-repeat="child in vm.Child_data | filter:{ listId: parent.id }">
                            <tr>
                                <td>
                                    <p >Details: {{child.ChildDetails}}</p>
                                </td>
                            </tr>
                            <tr ng-show="child.length === 0">
                                <td>
                                    No data to show here ...
                                </td>
                            </tr>
                        <tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>

</body>

</html>

For some reason, my " No data to show here ..." does not show up. I then tried this:

<tr ng-hide="child.length">
    <td>
        No data to show here ...
    </td>
</tr>

Then the messge shows up everywhere even when its not suppose to. Anyone have any idea why this would be?

you could check if child is defined or not. as its an object not an array, it wont have .length — mast3rd3mon
– mast3rd3mon, Commented Dec 18, 2017 at 17:00
I tried doing ng-show="child === undefined", but the message still shows up everywhere even if there is child data available. — Daniel Ellison
– Daniel Ellison, Commented Dec 18, 2017 at 17:04
well ive not ever heard of a ng-show class, only a hidden class — mast3rd3mon
– mast3rd3mon, Commented Dec 19, 2017 at 9:21

lzagkaretos · Accepted Answer · 2017-12-18 17:15:46Z

3

You can change <html> as follows check working plunker:

<table> 
    <tbody ng-repeat="parent in vm.Parent_data">
        <tr>
            <td> Parent details here: {{ parent.ParentDetails }} </td>
        </tr>
        <tr>
            <td>
                <table>
                    <tbody ng-repeat="child in filteredChildren = (vm.Child_data | filter:{ listId: parent.id })">
                        <tr>
                            <td>
                                <p>Details: {{child.ChildDetails}}</p>
                            </td>
                        </tr>
                    <tbody>
                    <tbody>
                      <tr>
                        <td>
                          <p ng-show="!filteredChildren.length">Nothing here!</p>  
                        </td>
                      </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

If I understood correctly what you are trying to achieve and you want to show something when list of filtered children is being empty.

answered Dec 18, 2017 at 17:15

lzagkaretos

2,9202 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Wakeford Over a year ago

Clever way to get an empty child array for the ng-repeat. Upvote for you.

Steve Wakeford · Accepted Answer · 2017-12-18 17:15:42Z

2

What I did to see what is happening is add these lines at the bottom of your ExampleController function:

alert(vm.Child_data[0].length);
alert(vm.Child_data[0].length === undefined);

To really see if the values are truthy or not. The ng-hide didn't work as expected because the value is not truthy, whether its child.length === 0 or child.length.

This will get you so far, but you have to remember that your child loop is filtered on parent id, so if no parent id's match it won't enter at all, therefore your parents with no children won't enter the loop at all and will never show your no data message.

I would solve this by making the child data a property on the parent data, but that's up to you.

answered Dec 18, 2017 at 17:15

Steve Wakeford

3311 silver badge8 bronze badges

1 Comment

Daniel Ellison Over a year ago

Than you Steve this helped me better understand the mecanics behind this.

Collectives™ on Stack Overflow

AngularJS - How to display message when nested child ngrepeat is empty.

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related