3

I've implemented the default search in my angularjs app, the code is as below:

<div>
<input type="text" ng-model="searchKeyword" placeholder="Search records...">
<div class="checkbox" ng-repeat="record in records | filter: searchKeyword">
<label class="ms-pl-xs">
  <input type="checkbox">{{record.value}}&nbsp;[{{record.count}}]
</label>
</div>

The issue I'm facing here, is, suppose someone happens to fire up some keyword that isn't there in the records that are being ng-repeated. I want a message to come up, stating "Nothing found" or whatsoever.

How do I implement that logic? I've gone through different articles and several questions over here, couldn't find anything in this regard. How do I see for whether the length of the terms searched is zero, so that I can ng-if that thing and display the message? Thanks!

Rakesh Chand
  • 3,105
  • 1
  • 20
  • 41
r0nn13
  • 37
  • 4
  • 1
    Possible duplicate of http://stackoverflow.com/questions/12340095/angularjs-ng-repeat-handle-empty-list-case – Arun Ghosh Jul 13 '16 at 07:51
  • 1
    No, it's not a duplicate... OP doesn't want to check the records array length, but the filtered array length... – MarcoS Jul 13 '16 at 07:52
  • @MarcoS Right, that's the second-highest voted answer in the linked question. – Oliver Salzburg Jul 13 '16 at 08:21
  • @OliverSalzburg: you're right, I did stop to the accepted answer... :-( But this question is far more specific, it explicitly asks about the **filter** result length... The question you point to does not, and indeed OP accepts a different answer... :-) – MarcoS Jul 13 '16 at 08:23
  • Not a duplicate, I checked other questions before asking this one :) – r0nn13 Jul 13 '16 at 09:03

1 Answers1

2

If you are using Angular 1.3+, you can use an alias:

<div>
  <input type="text" ng-model="searchKeyword" placeholder="Search records..." />
  <div class="checkbox" ng-repeat="record in records | filter: searchKeyword as found">
    <label class="ms-pl-xs">
      <input type="checkbox">{{record.value}}&nbsp;[{{record.count}}]
    </label>
  </div>
  <div ng-if="found === 0">
    Nothing found
  </div>
</div>

If instead you have to use an older Angular, you can assign the result of the filter to a new array, and then check it's length:

<div>
  <input type="text" ng-model="searchKeyword" placeholder="Search records..." />
  <div class="checkbox" ng-repeat="record in filteredRecords = (records | filter: searchKeyword)">
    <label class="ms-pl-xs">
      <input type="checkbox">{{record.value}}&nbsp;[{{record.count}}]
    </label>
  </div>
  <div ng-if="filteredRecords.length === 0">
    Nothing found
  </div>
</div>
MarcoS
  • 17,323
  • 24
  • 96
  • 174
  • The first solution doesn't let the records to come, and the second one (which does let the records to repeat), but doesn't fulfill the requirement. :( – r0nn13 Jul 13 '16 at 09:10
  • 1
    My big mistake!!! The `ng-if` should be **out** of the `ng-repeat`, otherwise, in case of "nothing found", it is not even evaluated by angular... :-((( Just corrected the code, it works, here, now... – MarcoS Jul 13 '16 at 09:30
  • 1
    Saved my day! Thanks a lot!! :D – r0nn13 Jul 13 '16 at 09:48