CODEWITHSUNDEEP
javascriptangularjs
Nosail
Nosail

Reputation: 471

Inaccurate filtering results in my AngularJS application

I'm having some issues with filtering data in my program.

The foll is my JSON sample:

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

The problem that i am facing is as follows: If i were to select a particular tag/author from the Tags/Author dropdown, the results are getting narrowed down as expected; however, when i click the 'Clear' button, the content disappears. I have to refresh the page for all the results to be displayed again.

I have another application using the same logic and in that clicing the 'Clear' button does not lead to the results disappearing. So i'm a bit concerned as to why it's working in one instance and not in the other.

I'd appreciate if you can help me understand where i'm going wrong here. The foll is the code of my Tags and Authors dropdwon:

<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>

The foll is the code in my Clear button:

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

The foll is my fitler logic:

<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">

Upvotes: 0

Views: 103

Answers (1)

MeanMan
MeanMan

Reputation: 1090

Instead of adding too many filter add a single object(filterParams as shown below) which holds the properties to be filtered>>>

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

all your select elements should use filterParams object as ng-model, for instance if you want to filter based on author use "filterParams.author" as ng-model>>

<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>

in your controller, initialise filterParams>>

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

your cancel action should reset the filterParams object

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

What went wrong in your example? while assigning empty string to all the filters on clicking clear, filter action happens and only empty value is shown that explains why the blank page. Then while you refresh, the filter gets cleared. If you use an object as shown in my example, then the code becomes cleaner and easy to manage.

Upvotes: 1

Related Questions