AngularJSアプリケーションで不正確なフィルタリングが発生する

Question

私のプログラムでデータのフィルタリングに問題があります。

follは私のJSONのサンプルです：

{ 
"expression": "to the day", 
"meaning": "", 
"example": "it's been four years to the day.", 
"pronunciation": "", 
"notes": "", 
"meta": { 
"book": [""], 
"author": [""], 
"tags": ["music"]} 
}, 

私が直面しています問題は、次のとおりです。私は、タグ/著者のドロップダウンメニューから特定のタグ/著者を選択した場合、結果が狭くなっています期待どおりのダウン。ただし、[クリア]ボタンをクリックすると、コンテンツが消えます。私はすべての結果が再び表示されるようにページを更新する必要があります。

私は同じロジックを使用している別のアプリケーションを持っています。そのため、[クリア]ボタンをクリックしても結果は消えません。だから私はなぜそれが1つのインスタンスではなく、他のインスタンスで動作しているのか心配です。

私がここで間違っているところを理解できるように助けていただければ幸いです。私のクリアボタンでコード

<md-input-container> 
<label>Tags</label> 
<md-select ng-model="tag"> 
<md-option ng-repeat="tag in tags | orderBy: 'toString()'" value="{{ tag }}"> <!-- tags here refers to a newly defined array that stores only one instance of all the tags against the 'tags' property on each object/word --> 
{{ tag }} 
</md-option> 
</md-select> 
</md-input-container> 

<md-input-container> 
      <label>Authors</label> 
      <md-select ng-model="author"> 
       <md-option ng-repeat="author in authors | orderBy: 'toString()'" value="{{ author }}"> <!-- authors here refers to a newly defined array that stores only one instance of all the authors against the 'author' property on each object/word --> 
        {{ author }} 
       </md-option> 
      </md-select> 
</md-input-container> 

follされています：

<md-card ng-repeat="classified in classifieds | filter: classifiedsFilter | filter: {meta: {tags: tag}} | filter: {meta: {'book': book}} | filter: {meta: {'author': author}} | orderBy: order" flex-xs="100" flex-sm="40" flex-gt-sm="30" class="classified"> 

Answer 1

：follは私のfitlerロジックは

<md-input-container> 
      <md-button class="md-warn" ng-click="classifiedsFilter = ''; tag = ''; book = ''; author = ''; order = '' ">Clear</md-button> 
     </md-input-container> 

ある follはdropdwon私のタグや著者のコードです

フィルタをあまりにも多く追加する代わりに、フィルタリングするプロパティを保持する単一のオブジェクト（以下に示すようにfilterParams）を追加します。>>>

<md-card ng-repeat="classified in classifieds | filter:filterParams | orderBy: order" flex-xs="100" flex-sm="40" flex-gt-sm="30" class="classified"> 

すべてのあなたは、著者の使用「filterParams.author」に基づいてフィルタリングしたい場合は、あなたのコントローラでNG-モデル>>として例えば、NG-モデルとして

<md-select ng-model="filterParams.author"> 
       <md-option ng-repeat="author in authors | orderBy: 'toString()'" value="{{ author }}"> <!-- authors here refers to a newly defined array that stores only one instance of all the authors against the 'author' property on each object/word --> 
        {{ author }} 
       </md-option> 
      </md-select> 

をfilterParamsオブジェクトを使用する必要があり、あなたの選択の要素>> filterParamsを初期化

$scope.filterParams ={} //initially no filters 

filterParamsオブジェクトをリセットする必要がありますあなたの取り消しアクション

<md-input-container> 
      <md-button class="md-warn" ng-click="filterParams={} ">Clear</md-button> 
     </md-input-container> 

あなたの例は何が問題になりましたか？空の文字列をクリックしてクリアするとすべてのフィルタに割り当てますが、フィルタアクションが発生し、空白のページが表示される理由を説明する空の値のみが表示されます。次に、リフレッシュ中にフィルターがクリアされます。この例のようにオブジェクトを使用すると、コードはよりクリーンで管理しやすくなります。