2017-03-07 13 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

が存在するかどうかをチェックします「最初でそれを隠したときにのみ入力、それを表示しようとしています変更された "場合は、対話するのではなく、変更されたときに' $ touched'ではなく 'search。$ dirty'を使用してみてください。さもなければ、あなたのコードはあなたの質問で概説したことからあなたが意図していることをするように見えます – haxxxton

+0

私は 'search $ 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> 
関連する問題