How do I count object keys to determine an expression? - angularjs

Question

I'm trying to hide the parent element of a table (with rows created using ng-repeat) if the table is empty. I've found the follow example:
https://stackoverflow.com/a/14616397/930998
But that only applies to arrays. I have an object with nested objects like this:
{
"-J9dKgyHpCTNNImuydo6" : {
"url" : "http://www.example.se",
"title" : "Example 1",
"uuid" : "-J9dKgyHpCTNNImuydo6",
"sla" : false
},
"-J9dKQ2kxHzFc5-bJIKN" : {
"url" : "http://www.example.com",
"title" : "Example 2",
"uuid" : "-J9dKQ2kxHzFc5-bJIKN",
"sla" : true
}
}
My repeater looks like this:
<tr ng-repeat="site in sites | archived:false">
<td class="title">{{site.title}}</td>
<td class="url">{{site.url}}</td>
<td class="sla">{{site.sla | BooleanToText}}</td>
</tr>
As you can see I have a filter on the repeater as well. What I'm trying to do is hide the whole table if "site in sites | archived:false" is empty. I've tried the following:
ng-show="(sites | archived:false).length"
and
ng-show="(Object.keys(sites) | archived:false).length"
But I can't get it right. I think the length always returns 0 no matter what I do.
Here's a fiddle to make it more visible: http://jsfiddle.net/insats/djD4m/3/
I basically want to hide the wrapping div if the table is empty.

Answer 1

Maybe there is an easier solution but for sure this will work:
Add a method that indicates if the filtered collection is empty:
$scope.isNonArchivedSiteCollectionEmpty = function () {
... // you can use filter here or some simpler logic to determine if there is
... // at least one element in the collection
}
Then in your view just use:
ng-hide="isNonArchivedSiteCollectionEmpty()"
UPDATE Probably the most reasonable way is just to keep and refresh filter collection from the $scope and resign using filter in the markup altogether. Then you could very easily check if it is empty or not.