2012-10-05 9 views
9

私はAngularJSにはとても新しいので、今日フィルタで遊んでいました。 filterフィルタを適用して、選択メニューの条件に一致する行のみを表示することができました。しかし、私はボタンに "クリアフィルター"機能を追加することができませんでした。ボタンをクリックしたときにどのようにフィルタをリセットできますか?次Plunkerでフィルタをクリアするには - AngularJS

、あなたはこれを達成するため、私は試みに使用されたコードを見ることができます:あなたが範囲内query変数をクリアするためにクリックハンドラをバインドするng-clickを使用することができます Plunker - AngularJS Sample

答えて

23
+0

ありがとうございます。それは本当に役に立ちました。 – Sparda

+1

私は寝室のフィルタをクリアしたいだけで、 '$ scope.query.bedroom = {}'を試してみました。 – naCheex

26

ng-click指令は、''undefinednull又は{}として、任意not- falsey-しかし-false Javascriptの値にフィルタモデルを設定するために使用することができます。

divをクリックすると、customFilterモデルがリセットされます。

<input type="text" ng-model="customFilter" /> 
<div ng-click="customFilter = undefined"> 
    Clear Filter 
</div> 

Here's a link to an updated fork of your Plunker project using Angular v1.4.1

+2

コントローラにクリック機能を追加することなく、非常に素早くきれいな方法です。非常に簡単です。 – Neel

+0

そのヒントは私を助けました。しかし、入力したng-modelをクリアしても問題は解決しないことがわかったので、フィルタオブジェクトをクリアする必要がありました。たとえば、 JoeKir

+0

@JoeKir Plunkrに '例を追加しました。私の答え。 –

0

この例では、NG-テーブルフィルタ

<table ng-table="tableParams" show-filter="true" class="table table-striped table-bordered table-condensed table-hover cf"> 
    <tbody> 
     <tr ng-repeat="tableData in $data"> 
      <td data-title="'Name'" filter="{Name:'text'}" sortable="'{Name}'" /> 
     </tr> 
    </tbody> 
</table> 

を使用している場合は

以下のよう NGクリックからフィルターをクリアすることができ、フィルタをクリアするのに役立ちます
$scope.tableParams.parameters({ filter: {}, sorting: {}, page: 1 }); 
関連する問題