Eric Clancy Eric Clancy - 8 months ago 34
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 ">
<tr ng-repeat="thing in package.things" ng-if="thing.status === 'interesting'">

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?


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