Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7894
  • Last Modified:

Filtering Grid data based on dropdown selection using Angularjs

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
ksd123
Asked:
ksd123
  • 3
  • 3
2 Solutions
 
MrunalCommented:
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
 
ksd123Author Commented:
Thank you.Could you please explain the logic on FileterRecords function ?
0
 
leakim971PluritechnicianCommented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
ksd123Author 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
0
 
leakim971PluritechnicianCommented:
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
 
ksd123Author 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 ?
0
 
leakim971PluritechnicianCommented:
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now