Hide if there is no data in angular

Question

<table>
    <tr ng-repeat="(key, values) in myData">
        <td> {{ key}} </td>
        <td>
            <div ng-repeat="item in values| limitTo:limit | filter: {source: sourceFilter}" ng-include="'templates/item.html'"/>
        </td>
    </tr>
</table>

With the above code I looping through the keys/values, where key is a string and value is an array. I am filtering the values by the 'source' property - this means that sometimes some keys have no items displayed. I would like to hide all of the rows that do not have any items.

I have tried using custom filters, and ng-show/ng-hide, but as I am an angular noob I can't seem to figure out how to do this. Could someone show me an example of how I can achieve this ? Many thanks.

tymeJV · Accepted Answer · 2014-02-12 15:01:28Z

2

You can do something like this:

<tr ng-repeat="(key, values) in myData" ng-hide="itemValues.length == 0">
    <td> {{ key}} </td>
    <td>
        <div ng-repeat="item in values = (itemValues | limitTo:limit | filter: {source: sourceFilter})" ng-include="'templates/item.html'"/>
    </td>
</tr>

answered Feb 12, 2014 at 15:01

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxim Shoustin · Accepted Answer · 2014-02-12 15:06:47Z

1

Try:

<table>
    <tr ng-repeat="(key, values) in myData" 
        ng-hide="(values | filter: {source: sourceFilter).length == 0">
        <td> {{ key}} </td>
        <td>
            <div ng-repeat="item in values| limitTo:limit | filter: {source: sourceFilter}" ng-include="'templates/item.html'"/>
        </td>
    </tr>
</table>

Some example in Plunker

edited Feb 12, 2014 at 15:06

answered Feb 12, 2014 at 14:53

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

1 Comment

Maxim Shoustin Over a year ago

@sree well, this answer was for AngularJS, not Angular 4. Pls read the question

Nellas · Accepted Answer · 2016-04-05 14:07:58Z

I usually make a directive that handles this case, that way I can use it more than once and I am not repeating code. Something like:

.directive('nodata', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            window.setTimeout(function () {
                if (element[0].innerText === '') {
                    element[0].innerText = '–';
                    element.css({
                        # use css here to display none or change color etc
                        # at your preference   
                    });
                }
            }, 0);
        }
    };
}])

Then you can just add nodata>{{ yourAngular.binding }} to your html element.

Collectives™ on Stack Overflow

Hide if there is no data in angular

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related