Implementing search in AngularJS: default way

Question

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!

Possible duplicate of stackoverflow.com/questions/12340095/… — Arun Ghosh
– Arun Ghosh, Commented Jul 13, 2016 at 7:51
No, it's not a duplicate... OP doesn't want to check the records array length, but the filtered array length... — MarcoS
– MarcoS, Commented Jul 13, 2016 at 7:52
@MarcoS Right, that's the second-highest voted answer in the linked question. — Oliver Salzburg
– Oliver Salzburg, Commented Jul 13, 2016 at 8: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
– MarcoS, Commented Jul 13, 2016 at 8:23
Not a duplicate, I checked other questions before asking this one :) — r0nn13
– r0nn13, Commented Jul 13, 2016 at 9:03

MarcoS · Accepted Answer · 2016-07-13 09:27:52Z

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>

edited Jul 13, 2016 at 9:27

answered Jul 13, 2016 at 7:47

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

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

3 Comments

r0nn13 Over a year ago

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. :(

MarcoS Over a year ago

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...

r0nn13 Over a year ago

Saved my day! Thanks a lot!! :D

Collectives™ on Stack Overflow

Implementing search in AngularJS: default way

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related