2017-03-07 175 views
0

我有一個輸入可以過濾出用戶列表。僅當輸入提供時顯示過濾器結果 - AngularJS

<!-- Input --> 
<input type="text" ng-model="search"> 


<div ng-repeat="obj in data | filter:search" ng-show="search.$touched" > 

    <div class="row"> 

     <!-- Country --> 
     <div class="col-xs-4 text-center" > 
      <p>[[obj.country]]</p> 
      <img src="data:image/png;base64,[[obj.flag]]" alt="" width="30px"> 
     </div> 

     <!-- Main Info --> 
     <div class="col-xs-4" > 
      <p class="company-name">[[obj.user.username]]</p> 
      <p>[[obj.obj.phone_public]]</p> 
      <p>[[obj.user.email]]</p> 
      <a href="[[obj.obj.url]]">[[obj.obj.url]]</a></span> <span class="col span_2_of_6"> 
     </div> 

     <!-- Logo --> 
     <div class="col-xs-4 pull-right" > 
      <img src="data:image/png;base64,[[obj.logo]]" alt="" width="100px"> 
     </div> 

    </div> 

    <br><hr> 


</div> 

過濾功能工作的偉大,但我想先躲它,只顯示它時,輸入已被修改。


然後加入ng-show="search.$touched"

enter image description here

加入ng-show="search.$touched"

enter image description here


我應該使用不同的指令後?

現在什麼都不顯示...

+0

存在「試圖在第一次將其隱藏,只顯示它在輸入已被修改「,如果您希望修改時使用」search。$ dirty「而不是」$ touched「,則可以嘗試使用它,而不是與其交互。否則,你的代碼似乎根據你在問題中概述的內容做你正在打算的內容 – haxxxton

+0

我試過'搜索。$ dirty' - 結果相同。 – ihue

+0

有沒有其他建議? – ihue

回答

0

的關鍵部分是:ng-show="search"將檢查的任何搜索字符

<!-- Input --> 
<input type="text" ng-model="search"> 


<div ng-repeat="obj in data | filter:search" ng-show="search" > 

    <div class="row"> 

     <!-- Country --> 
     <div class="col-xs-4 text-center" > 
      <p>[[obj.country]]</p> 
      <img src="data:image/png;base64,[[obj.flag]]" alt="" width="30px"> 
     </div> 

     <!-- Main Info --> 
     <div class="col-xs-4" > 
      <p class="company-name">[[obj.user.username]]</p> 
      <p>[[obj.obj.phone_public]]</p> 
      <p>[[obj.user.email]]</p> 
      <a href="[[obj.obj.url]]">[[obj.obj.url]]</a></span> <span class="col span_2_of_6"> 
     </div> 

     <!-- Logo --> 
     <div class="col-xs-4 pull-right" > 
      <img src="data:image/png;base64,[[obj.logo]]" alt="" width="100px"> 
     </div> 

    </div> 

    <br><hr> 


</div> 
相關問題