I am new to AngularJS and writing an AngularJS application with four drop down (select) acting as the search criteria to filter the search result.
Each drop down is populated by a field from the search result.
Though, some of the dropdown fields are not displayed in the search result.
The expected logic is as follows:
1.On page load, you display the 4 dropdown and underneath the unfiltered results say, 10 rows
2.On change of dropdown A, the associated filter is applied to the JSON result and result is refreshed and automatically displayed
3.The last selected dropdown option is retained each time
4.On change of dropdown B, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
5.On change of dropdown D, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
6.On change of dropdown C, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
So, the dropdown can be selected in any order and there is a cummulative filtering
Also, if no result is returned by filter combination, a message is displayed.
I have a solution for one drop down, but cannot implement multiple drop down filter on same json data.
My solution was based on the following filter data using dropdown?, which as a plunker.
Any help will be very much appreciated.
You can pass an Object as the parameter to your filter expression, as described in the API Reference here http://docs.angularjs.org/api/ng.filter%3afilter. This object can selectively apply the properties you're interested in, like so:
<input ng-model="search.name">
<input ng-model="search.phone">
<input ng-model="search.secret">
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">
Here's a Plunker : http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview
The plunker works for input tags, hence it will also work for select tags with few modifications.
Disclaimer : Plunker Not Created By Me
Related
i'm using the PDO library in php to access a database and return some values into a table which need to be shown when the user first opens the webpage,
after this I want to implement a filter option, so that the user can input some data in a form field and the data shown is updated according to the filters set by the user.
I don't know how to update the DOM in this case, would it be possible to update the DOM using Jquery so that only the new values are shown in the table, or do i need to redirect to a new page/reconstruct my table with a full request/response cycle.
thank you for your help in anycase.
If I understand correctly, you want to output the data from the result of your MySQL query as a table, and then having a search bar which will filter the output table according to the search bar. What I would do is first use the data to generate a table and give it a css class. For the search bar you can use form or event listener to process apply your filter from the value in the search bar. For example you can loop the rows of the table and check if a column contain a substring of the search bar value(as an example, check with whatever criteria you prefer) and just add a css value display: hidden to the row, or restructure the table, there are many ways of doing it.
I'm using angular-materialize to generate a multiple select :
http://krescruz.github.io/angular-materialize/
I'm using ng-model to retrieve the selected items, all this works, however I tried to add a search box in order to filter what I need.
my problem is I search for the first time and check the value, but then when I make an other search (that doesn't lead to the previously selected item) it is deleted and I'm only left with the last selected items.
So my questions are :
1/ is there a way to conserve all the selected items even with multiple search?
2/ is it possible to always have the dropdown "active" meaning I won't have to click in order to have the list ? (if that helps the previous problem)
Thank you
We have requirement, to search for different fields using a single text box. For example, the search has to be based on three fields; Product, Brand and Place.
Initially the user will be given the below text in the textbox which cannot be modified: Product:-Brand:-Place
When user wants to search for Product, Brand and Place, he will just add values: Product:"TV"-Brand:"Samsung"-Place:"London"
When user wants to search for just Product: Product:"TV"-Brand:-Place
Can some body help me, how can be done that in jQuery or angular js?
This can be done using angular filter..
You can pass an object as the second parameter to achieve this if you can have two search fields
<div ng-repeat="friend in user.friends | filter:{name:searchNameText, age:searchAgeText}">
Otherwise you'll need to write a custom filter to use the same field for both, or pass a custom filter function as the third parameter which is described in the docs.
http://docs.angularjs.org/api/ng.filter:filter
The following classic report which when we select specific row pops up with new modal region called addExtraDetails with some data grabbed from row and some new additional info required from user:
When (+) is being clicked the new modal region pops up, with populated values taken from the report row. So: in Column link I put:
javascript:function_to_add_to_basket('E',#ID#, 'Extra#ROWNUM#', #PRICE#,'DUMMY');
Then external js function is responsible for passing information. The problem is it does not refresh every time (+) is populated instead it keeps values of the first input.
I found better solution(and cleaner), upon clicking (+) Column Link is passing:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
javascript:$s('P4_SET_TYPE','E');
javascript:$s('P4_SET_OBJECT_ID','#ID#');
javascript:$s('P4_SET_ELEMENT_ID','Extra#ROWNUM#');
javascript:$s('P4_SET_COST','#PRICE#');
javascript:$s('P4_SET_DISCOUNT','DUMMY');
javascript:openModal('addExtraDetails');
Now it updates everytime when we select various rows HOWEVER since we have dropdown javascript grabs all possible value of Quantity column so for this code:
javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
the output is: '012345678910'.
How can I pass all values to modal region and make it to work with new values every time its being called ?
You need to retrieve the value of the select list when you click the modal button. The value is not static, unlike the other values. The substitution strings are replaced with their value when the page is rendered.
It isn't really necessary to do all those item sets if all you want to do is use them in a javascript function. Your first idea was probably just as good but I'll just run with openModal.
First, determine how to target the select list. You did not specify whether your report is a wizard-generated tabular form or a manual tabular form (ie used apex_item to make the select list). You could either target the select list by the name attribute, which refers to an array, or select by header of the column. Also see this article.
Eg, with the column name for the select list being QUANTITY, selecting the list would be:
td[headers=QUANTITY] select:visible
Alternatively, if you determine the array you can be more precise in targetting the element. Eg if the NAME attribute is set to f02 then you could select the select lists with
input[name=f02]
Then modify the openModal function to select the list value on the same row as pThis - which would be the triggering element, the anchor :
function openModal(pThis, pMethod){
//fetch the value of the select list on the same row
//I use the second method of selecting here
var lListValue = $(pThis).closest('tr').find('input[name=f02]').val();
...
}
You'll also need to adjust your call to openModal:
javascript:openModal(this, 'addExtraDetails');
With a standard select2 dropdown box, populated with a list of names from a database call, is there a way to search on hidden items within the search area?
Example:
Select2 box shows to end user "Charlie Watts" but actually the options value holds "Charlie Watts (22)". I want the use to be able to search for 22, but not show it by default to the end user.
TIA
Yep, you can achieve that using the formatResult and/or formatSelection methods. There's a great example of using them in the Select2 Docs: Templating.
In your format function, filter out the " (22)" part of your value and return everything before it.
On a UX note, it could be strange to see matches appear that don't give any indication as to why they match. If that doesn't matter for your use-case, carry on.