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>