How to show message when nothing in array after being filtered using AngularJS -


i showing list grouped in alphabetical order showing , once click a, b, c, etc... filters letter.

enter image description here

but if click letter has nothing in want have no results found message.

this have tried:

    <ul class="acronym-library-list" ng-repeat="parentitem in acronyms | groupby:'type':'acronymbytype' | filter:acronymfilter">         <h2>{{parentitem.type}}</h2>         <li ng-repeat="item in acronyms | filter: { type: parentitem.type }">             <div class="col-md-1 acronym">                 {{item.acronym}}             </div>             <div class="col-md-11 acronym-title">                 {{item.title}}             </div>          </li>     </ul>     <p ng-show="acronyms.length==0">no results found...</p> 

i have tried:

<p ng-show="!acronyms.length">no results found...</p> 

update: array list:

app.controller('acronymlibrary', function($scope) {      $scope.acronyms = [         {type: 'a', acronym: 'ap', title: 'accounts payable'},         {type: 'a', acronym: 'ar', title: 'accounts receivable'},         {type: 'a', acronym: 'asn', title: 'advanced shipping notice'},         {type: 'a', acronym: 'atp', title: 'available promise'},         {type: 'b', acronym: 'ba', title: 'business analyst'},         {type: 'b', acronym: 'bt', title: 'business technology'},         {type: 'c', acronym: 'cm', title: 'customer master'},         {type: 'd', acronym: 'dba', title: 'database administer'},         {type: 'd', acronym: 'dc', title: 'distribution center'},         {type: 'e', acronym: 'ecc', title: 'extended care component'},         {type: 'f', acronym: 'fico', title: 'financials & controlling'},         {type: 'g', acronym: 'gl', title: 'general ledger'},         {type: 'k', acronym: 'kpi', title: 'key performance indicator'}     ]; }); 

try use ng-init before, example:

<div class="container" ng-init="items = (list | filter : somefilter)">   <ul ng-repeat="item in items" ng-show="items.length">     ...   </ul>    <p ng-show="!items.length">no results found...</p> </div> 

Comments