CODEWITHSUNDEEP
javascriptangularjs
supersaiyan
supersaiyan

Reputation: 1730

search json data which come in search : angular

i am getting a json data from a ajax. i want to show only those data only which came in search.

<input  class="form-control" ng-model="search.name" id="exampleInputEmail1">
     <table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>

friends = [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'}]

May be its a easy fix but i am very new in angular.Any pointer will be really helpfull

Upvotes: 0

Views: 57

Answers (1)

kTT
kTT

Reputation: 1350

If I understand correctly, you want to hide all results and show only that match the search pattern.

You can use ng-show to limit the visibility of the table. jsfiddle of below code

<div ng-init="friends = [{name:'John', phone:'555-1276'},
                     {name:'Mary', phone:'800-BIG-MARY'},
                     {name:'Mike', phone:'555-4321'},
                     {name:'Adam', phone:'555-5678'},
                     {name:'Julie', phone:'555-8765'},
                     {name:'Juliette', phone:'555-5678'}]"></div>
<input class="form-control" ng-model="search.name" id="exampleInputEmail1">
<table id="searchObjResults" ng-show="search.name">
  <tr>
      <th>Name</th>
      <th>Phone</th>
  </tr>
  <tr ng-repeat="friendObj in friends | filter:search">
      <td>{{friendObj.name}}</td>
      <td>{{friendObj.phone}}</td>
  </tr>

Upvotes: 1

Related Questions