Display no values when array empty Angular.js

Question

I am learning angular.js and trying to determine what the easiest way would be for me would be to display message 'no values found' when array is empty.

I have tried this which is not working

 <ul>
        <li ng-show="!items.length">No values</li>
        <li ng-repeat="i in items | searchFor:searchString">                
            <p>{{i.title}}</p>
        </li>
    </ul>

And my controller

app.filter('searchFor', function () {
return function (arr, searchString) {
    if (!searchString) {
        return arr;
    }
    var result = [];
    searchString = searchString.toLowerCase();
    angular.forEach(arr, function (item) {
        if (item.title.toLowerCase().indexOf(searchString) !== -1) {
            result.push(item);
        }
    });
    console.log(result.length);
    return result;
}
});

How could I display the message 'No values found' when there are no values returned?

Zohaib Ijaz · Accepted Answer · 2015-11-22 12:04:24Z

5

Use filtered array in ng-if or ng-show

<ul>
    <li ng-repeat="i in filteredItems = (items | searchFor:searchString)">                
        <p>{{i.title}}</p>
    </li>
    <li ng-show="!filteredItems.length">No values</li>
</ul>

answered Nov 22, 2015 at 12:04

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

Comments

georgeawg · Accepted Answer · 2015-11-22 13:13:36Z

1

This works:

<ul>
     <li ng-show="!(items | searchFor:searchString).length">
           No values
     </li>
     <li ng-repeat="i in items | searchFor:searchString">                
            <p>{{i.title}}</p>
     </li>
</ul>

Try the JSFiddle

answered Nov 22, 2015 at 13:13

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

Display no values when array empty Angular.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related