Eric Clancy Eric Clancy - 1 month ago 5
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

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

Comments