AngularJS ng-show，ng-hide

Question

我有一个AgularJS搜索使用过滤器，它的工作原理。我现在希望过滤器只显示与过滤器匹配的结果。

所以，我想初始数据加载不显示，如果我在过滤器中输入匹配，然后显示结果。

这是到目前为止我的代码：

<div class="row"> 
    <div class="large-12 columns"> 
    <div ng-app> 
     <div ng-controller="CashTransController">  
     <input type="text" ng-model="search.$"> 

     <br /> 

     <div><strong>Filter Results</strong></div> 

     <br /> 

     <div class="row"></div> 

     <br/> 

     <table border="0" class="items"> 
      <thead> 
      <tr> 
       <th>Purchaser</th> 
       <th>Redemption Code</th> 
       <th>Amount</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr ng-repeat="item in items | filter:search"> 
       <td>{{item.firstname}} {{item.lastname}}</td> 
       <td valign="top"><h3>{{item.redemption_code}}</h3></td> 
       <td><h3><a href="#">{{item.creation_date}}</a></h3></td>  
      </tr> 
      </tbody> 
     </table> 

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

Answer 1

你可以简单地添加一个ng-show表项。

我不知道你为什么叫你的搜索模型搜索$而不只是搜索。

试试看看这个代码。它只会显示的结果，如果你输入的东西到输入：

<div class="row"> 
    <div class="large-12 columns"> 
     <input type="text" ng-model="search"> 
     <br/> 

     <div><strong>Filter Results</strong></div> 
     <br/> 

     <div class="row"> 
      <p>{{search}}</p> 
     </div> 
     <br/> 
     <table border="0" class="items"> 
      <thead> 
      <tr> 
       <th>Purchaser</th> 
       <th>Redemption Code</th> 

       <th>Amount</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr ng-show="search" ng-repeat="item in items | filter:search"> 
       <td>{{item.firstname}} {{item.lastname}}</td> 
       <td valign="top"><h3>{{item.redemption_code}}</h3></td> 
       <td><h3><a href="#">{{item.creation_date}}</a></h3></td> 
      </tr> 
      </tbody> 
     </table> 
     <br/> 
    </div> 
</div>