搜索搜索中出现的json数据:angular

时间:2015-06-05 11:51:03

标签: javascript angularjs

我从ajax获取json数据。 我只想显示那些仅在搜索中出现的数据。

<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'}]

可能是一个简单的修复,但我是一个非常新的angular.Any指针将是非常有帮助的

1 个答案:

答案 0 :(得分:1)

如果我理解正确,您希望隐藏所有结果并仅显示与搜索模式匹配的结果。

您可以使用ng-show来限制表格的可见性。 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>