Eric Clancy Eric Clancy - 1 year ago 44
AngularJS Question

Hiding container if all children are hidden in Angular

I am creating a number of tables dynamically, which all have a number of rows that are also created dynamically using Angular.

My goal is to have each table hidden if there are no visible rows in that table's tbody.

<table ng-repeat="package in listOfPackages" ng-if="this.getElementsByTagName('tbody')[0].childNodes.length > 0 ">
<tbody>
<tr ng-repeat="thing in package.things" ng-if="thing.status === 'interesting'">
<td>{{thing.someInfo}}</td>
<td>{{thing.someOtherInfo}}</td>
</tr>
</tbody>
</table>


The line
ng-if="this.getElementsByTagName('tbody')[0].childNodes.length > 0"
seems to be my problem - I do not know the proper way to find an element's own children, and check how many it has visible.

Is there any possible way to do this in angular?

Answer Source

create a function in your controller something like

$scope.showPackageTable = function (package) {
    var toShow = false;
    for (var thing in package.things) {
        if (thing.status === 'interesting') { toShow = true; }
    }
    return toShow;
}

then you can use that in your html ng-if="showPackageTable(package)"