How to filter outer array records on the basis of inner array value

Question

I have an object of array inside another object. So, there are two nested ng-repeat in my html. I am trying to hide the label data if ACTION is not "Changed" for ex. in below example, last row "Changed L3" should not display.

My scope data:

 $scope.groups =
    [{
      "label": "L1",
      "tabledata": [{
                      "FIELDNAME": "C1 Entity",
                      "SCREEN": "A",
                      "ORIGINALVALUE": "NA",
                      "ACTION": "Changed",
                      "NEWVALUE": "Something",
                      "TYPEACT": "RB"

                   },
                   {
                          "FIELDNAME": "C2 Entity",
                          "SCREEN": "A",
                          "ORIGINALVALUE": "NA",
                          "ACTION": "Changed",
                          "NEWVALUE": "SSSS",
                          "TYPEACT": "RB"

                       }
                      ]

    },
    {
      "label": "L2",
      "tabledata": [{
                      "FIELDNAME": "B1 Entity",
                      "SCREEN": "B",
                      "ORIGINALVALUE": "NA",
                      "ACTION": "Changed",
                      "NEWVALUE": "Something",
                      "TYPEACT": "RB"

                   },
                   {
                      "FIELDNAME": "B2 Entity",
                      "SCREEN": "B",
                      "ORIGINALVALUE": "NA",
                      "ACTION": "Changed",
                      "NEWVALUE": "Something",
                      "TYPEACT": "RB"

                   }
                   ]

    },

     {
      "label": "L3",
      "tabledata": [{
                      "FIELDNAME": "A Entity",
                      "SCREEN": "C",
                      "ORIGINALVALUE": "NA",
                      "ACTION": "Added",
                      "NEWVALUE": "Something",
                      "TYPEACT": "RB"

                   }]

    }]

My html

<div ng-repeat="group in groups" >
        <p><b>{{ "Changed " + group.label }}</b>
                </p>
        <table class="table table-bordered" >
            <tbody >
                <tr >
                    <th width ="20%"><b ng-bind="column1" ></b></th>
                    <th width ="40%"><b>Previous value </b></th>
                    <th width ="40%"><b ng-bind="column3" ></b> </th>
                    <th width ="10%"><b>Action </b></th>
                </tr>
                <!-- BEGIN: Inner ngRepeat. -->
                <tr ng-repeat="endorsedata in group.tabledata | filter :{ACTION :  'Changed'}  | orderBy:'FIELDNAME' " >
                    <td ng-init ="showRow = 1">{{ endorsedata.FIELDNAME }}</td>
                    <td>{{ endorsedata.ORIGINALVALUE }}</td>
                    <td>{{ endorsedata.NEWVALUE }}</td>
                    <!-- <td>{{ endorsedata.ACTION }}</td> -->
                </tr>
                <!-- END: Inner ngRepeat. -->
            </tbody>
        </table>
    </div>

I want to hide the labels if there is value other than 'Changed' in ACTION attribute. How can this achieved?

Plunker Here

EDIT: Plunker Link updated.

Answer 1

Here we go then, this should do what you want: plunker

Basically, created a filter with same overloads as the angular $filter. Then inside for each tabledata I use a filter option on it.

If the filtered array is different from the original array then we can safely say that a something was found. You can easily modify this to meet your exact needs.

The example shows how you can filter the top most array via the child array.