Filtering Grid data based on dropdown selection using Angularjs

ksd123
ksd123 used Ask the Experts™
on
Hi Experts,

I have a dropdown list with the values "Any State","New York","New Jersey","California" etc and have a grid with columns(Product Name, Available,Entry Date,Features
etc) with following entries


Product Name      Available                   Entry Date           Feature          


Product1               All States


Product2               New york,Richmond


Product3                Michigan,California


Product4                All States


Product5                All States


Initially the current logon user state should be selected in the dropdown and this was already achieved here.But there is a change in the requriment and now I have a new value in the dropdonw ie."Any State" .User will change dropdown selection to "Any State" or "New York","New Jersey" etc and should display Products that are available in that state.

For example :If current logon user belongs to "New York" then in the dropdown "New york" should be selected and should display all the records that are available in
New york state. The result grid would be (Product1,Product2,product4,product5).That means I need to  filter the data in the Grid based on dropdown selection with "Available" column data. In the above Grid "Available" column data we will have either "All States" or individual State names.

so my logic should be something like this


USER  STATE / Dropdown Selection  
      Available (column)

New York                                             -> Should display records [All States + New York]     =                                                          Product1,Product2,Product4 and Product5


California                                            ->Should display records  [All States +     California]=Product1,Product3,Product4 and Product5


Any State                                           ->Shoud display all records [All states +Individual  states(New   york,Richmond,Michigan,california etc) ]
=Product1,Product2,Product3,Product4 and Product5 (basically all the records in the Grid)

Any sample code would be highly appreciated
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,
angular js is nothing but script.

I am not much expert in angular JS
but this below link will help you to filter your table records...
I have used simple jquery functions like .each
.

http://jsfiddle.net/bGNVm/

hope this helps you.

Author

Commented:
Thank you.Could you please explain the logic on FileterRecords function ?
leakim971Multitechnician
Top Expert 2014
Commented:
Test page : http://jsfiddle.net/s2Ff9/4/

We added a filter to the list :
<tr ng-repeat="product in products | filter:productFilter">

Open in new window


And the corresponding filter :
        $scope.productFilter = function(data) {
            var isAllState = data.availcode == "";
            var isSelectedState = data.availcode == $scope.selectedState.abbreviation;
            if(isAllState || isSelectedState) {
                return true;
            }
            // else :
            return false;
        }

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Thank you.Actually  I have  custom directive with watch functions for the Grid.All the column definitions for the Grid are defined in the directive.

1)In my case where should I add the "Product filter" ?

2) var isSelectedState = data.availcode == $scope.selectedState.abbreviation; //briefly explain about this statement
leakim971Multitechnician
Top Expert 2014

Commented:
1) I dunno, I hate to imagine code where you just need to post it. Check where I put the filter, try on your side, let me see it, maybe I will be able to help

2) Imagine :
- each row (data) is like this : {name:"XXXX", avail:"XXX", availcode:"XX"}
- each selected option (selectedState) is like this : {"name":"Alabama","abbreviation":"AL"}

the following return true or false : data.availcode == $scope.selectedState.abbreviation;
we put the result (true or false) in :  isSelectedState

Author

Commented:
Hi Leakim971,

I have noticed an issue with your code, I selected "Michigan" state in the dropdown
and it shows following output which is wrong.It should also show "Product3" as this is
available in "California" and "Michigan". This is because the availcode for this is "CA"
and will only show correct records if we select "California" state in the dropdown.

Product1      All States
Product4      All States
Product5      All States

I have another concern, the availabilty of product's in the states changes frequently in the database.For example if I have a Product10 which is available in Michigan state and we put some static availcode for this and later they have added two more states to the product10 then the above logic will fail. Can you correct me if I am wrong ?
leakim971Multitechnician
Top Expert 2014

Commented:
So I see you understood how it work, great. From the filter you can do more, for example split the << avail >> by "," and loop over all this new array (example ["California", Michigan"] if it's correspond to the selectedState.name

Concerning the availability, I don't understand, the data should not static... or yes it's static in my test page but it should come from a service...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial