Solved

Filtering Grid data based on dropdown selection using Angularjs

Posted on 2014-02-25
7
7,064 Views
Last Modified: 2014-03-01
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
0
Comment
Question by:ksd123
  • 3
  • 3
7 Comments
 
LVL 22

Accepted Solution

by:
Mrunal earned 200 total points
ID: 39885302
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.
0
 

Author Comment

by:ksd123
ID: 39885353
Thank you.Could you please explain the logic on FileterRecords function ?
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
ID: 39885421
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

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:ksd123
ID: 39885459
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
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39885493
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
0
 

Author Comment

by:ksd123
ID: 39888426
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 ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39888656
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...
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now