CODEWITHSUNDEEP
javascriptangularjs
FrontEnd Expert
FrontEnd Expert

Reputation: 5803

Display search result after some character entered angular

I have search screen which populates the data based on search query..

What I want -

• The data should be populated on entering the 3rd character in the search box

 <div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      Search:
      <input ng-model="query">

    </div>
    <div class="col-md-10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="detail in details | filter:query">
          <span>{{detail.name}}</span>
          <p>{{detail.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

Simple Demo

Please help me!!

Upvotes: 1

Views: 846

Answers (1)

Vikram K
Vikram K

Reputation: 76

Check for length of variable query and use ng-show to hide/display results.

  <ul ng-show="query.length>=3" class="phones">
    <li ng-repeat="detail in details | filter:query">
      <span>{{detail.name}}</span>
      <p>{{detail.snippet}}</p>
    </li>
   </ul>

Upvotes: 4

Related Questions