CODEWITHSUNDEEP
angularjs
Gil
Gil

Reputation: 97

Hiding table body when all the rows are hidden in angularjs

I'm trying to display a table with activities, with a row displaying the day and after that the list of activities for this day. I also want the user to be able to filter the activities. "myActivities" is a Map with the user's activities assigned to true, and the rest to false. my code looks like this:

<table>
<tbody ng-repeat="date in dates">
<tr><td>{{date.day}}</td></tr>
<tr ng-repeat="activity in date.activities" ng-show="myActivities[activity.id] == true">
    <td>{{activity.time}}</td><td>{{activity.name}}</td>
</tr>
</tbody>
</table>

The problem with that is when there is a day with no relevant activities for the user, the row displaying the date is still shown but all the activities under it are hidden. I successfully solved the problem with this function:

$scope.checkDate = function(activities)
{
    activities.forEach(function(activity){
        if (myActivities[activity.id] == true) return true;
    });
    return false;
}
 //added the ng-show to the tbody in the html:
<tbody ng-repeat="date in dates" ng-show="checkDate(date.activities)">

It works perfectly, but is this the best solution? I have a feeling that there is a nicer solution. any ideas ?

Thanks!

Upvotes: 0

Views: 532

Answers (1)

devqon
devqon

Reputation: 13997

You can assign the filtered variables to the date object, and check the length of that property:

<table>
    <tbody ng-repeat="date in dates" 
           ng-show="date.filteredActivities.length">
        <tr>
            <td>{{ date.day }}</td>
        </tr>
        <tr ng-repeat="activity in (date.filteredActivities = (date.activities | filter: { active: true }))">
            <td>{{ activity.time }}</td>
            <td>{{ activity.name }}</td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions