I am displaying results from json in a react bootstrap table. On clicking compare, the results get filtered within the table. Now I wanted to reload and display the selected products in a different tabular format on clicking "Compare". The page should reload and then only the selected products should display in a table with headers vertically aligned. Can any one please help? Full code here - https://codesandbox.io/s/o4nw18wy8q
Expected output sample on clicking compare -
Probably you need to have a function inside your class to return two different views based the state of your filter status. If the filter status is not true, then display the normal view, if filter status is true, then display the view that you have just mentioned in the above view. As far as the design is concerned, you should be able to work out the table designs.
And when you hit clear, then you should set the filter status back to false
This is not a full working code. I am just giving you some idea.
Here is a codesandbox
https://codesandbox.io/s/2x450x3rqn
You can return a view from the function
onButtonClick = () => {
...
...
return <BootstrapTable
keyField="PartNumber"
selectRow={updatedData}
data={updatedData}
columns={updatedData}
/>
}
I have a long table and I'd like to show only the first three entries by default. I'd like to provide something like the table entitled "Additional Metadata" shown on this page with a 'see more' option. The 'see more' link, once clicked, will show the rest of the rows in the table, and an option will appear at the bottom of the table now that says "see less".
I tried playing around with ng-show/ng-hide but couldn't accomplish the aspect where the "see more" link would show at the bottom of the table once all rows are shown. Any help would be appreciated.
Assuming you are using "ng-repeat" to populate the table, you should select an additional "index" or "row no" field and then use a "filter" to filter where the index is less than 4. clicking "see more" can then just change the filter.
Just use the limitTo filter to show n amount of first entries, when n can a scope variable (this is much the same way pagination is usually done in angular)
$filter('limitTo')(input, limit, begin)
You'll set limit to 3, and begin from 0
Inside your ngRepeat
ng-repeat="row in data | limitTo: showAmount : 0"
And inside your controller
$scope.showAmount = 3;
I'm using Ionic framework for my new application.
I have an issue, I want to know how it would be possible to insert views dynimacally.
I make a request to the server requesting news, the response in in JSON which look like :
{
"title":"news 1",
"image":"http://www.server.com/news_image1.png",
"description":"news_description"
},
{
"title":"news 2",
"image":"http://www.server.com/news_image2.png",
"description":"news_description"
},
{
"title":"news 3",
"image":"http://www.server.com/news_image3.png",
"description":"news_description"
}
I want to insert data dynmaically to the ion-view and be able to swipe between the news like the image below :
So if you just have an idea how can that be possible !
You could do a slide box and the use a ng-repeat to dynamically create slides. Although if you are making a bunch of slides i would use collection repeat. Check out slide boxes here http://ionicframework.com/docs/api/directive/ionSlideBox/ . and ng-repeat and collectio-repeat here and here https://docs.angularjs.org/api/ng/directive/ngRepeat , http://ionicframework.com/docs/api/directive/collectionRepeat/
I'm using an infinite scroller package which loads results dynamically. I have a set of filters which display the results I want depending on what filter is selected.
The results will not be returned to the front end in any sort of filtered order. What I want to achieve is get the unfiltered results being returned into filtered state that I may already have selected.
For example one filter is a star rating and lets say that I have 3 and 4 star selected in my filter. How would I get newly loaded results to be returned within that filter.
I suppose I could send the filters back to the backend to specifically request what I'm looking for but I'm looking for an angular solution.
Here's the ng-repeat that iterates over each hotel I want any newly loaded results to be subjected to any filters already selected:
<div ng-repeat="hotel in (filteredHotels = (hotelResults | hotelRatingsFilter:ratings)) | startFrom:(currentPage - 1)*10 | limitTo:10 " class="hotel-results-container">
<ul>
<li>{{hotel.starRating}}</li>
</ul>
</div>
This is the code that communicates with the backend, as far as I can tell (I didn't write it)
.constant('HOTEL_SEARCH_CONSTANTS',{
httpSettings:
{
url:'/hotel/hotelsearch/search',
method:'POST'
}
})
.service('hotelSearchService', ['CachedObservable','$http','HOTEL_SEARCH_CONSTANTS','HOTEL_CONSTANTS','baseSearchSettings','loadingScreen',
function(CachedObservable,$http,HOTEL_SEARCH_CONSTANTS,HOTEL_CONSTANTS,baseSearchSettings,loadingScreen){
CachedObservable.call(this)
var _this = this,
p
this.search = function(searchParameters){
var config = HOTEL_SEARCH_CONSTANTS.httpSettings
var currentSearch = angular.extend(searchParameters,baseSearchSettings)
config.data = {
basicSearch: baseSearchSettings,
hotelSearch: searchParameters
}
_this.update(p=$http(config), angular.extend(angular.copy(searchParameters),baseSearchSettings) )
//Alert subscribers with both the promise and the search parameters
//used
loadingScreen.newSearch.update(p,HOTEL_CONSTANTS.loadingTemplates.loadingMessageTemplate)
//Trigger a loading screen and specify the template to use
}
}])
Thank you
I found this article that says that angular will iterate over the array if there is any change to the data. Looks like its safe to keep adding to the data array and any filters already being used will be applied by angular to the updated data array.
Step 6 says:
"A watch is added on the array, which triggers step 1 again if the array undergoes any change"
ng-repeat in angular
Scenario
Lets say I am owner of a big company that has many stores. Depending on what role (place in the organization) I have within the company, I will have different access to data. There will be different modules and for this specific question there is one where users that have access can go through daily cost and sales.
(If that's legal or not...don't care, it's just for an example.)
The user thereby get all data through REST API from BackEnd (Java application) with all data for all stores the user has access to. The user should then be able to filter the data, by different filter combinations. Most relevant for my question is the date interval by days.
There will be some charts showing data on different levels and below there will be a table area where I want the multi-level tables, hence my question.
Done so far
I first created accordions that have stores on accordion-group level and then next level of data in a table, within the accordion-body. (Only hard coded data at the moment.) The problem here was that an according heading is a string and after some discussion we felt that this was not a good solution since the heading would consist of parts of data that in a table would have been separate columns. It would therefore be difficult to "columnize" the heading data to match horizontally the different "stores" (between the accordion headings) when collapsed (and of course even more messy when one or more accordion are expanded).
I replaced the accordions with table and ng-repeat. Have successfully populated the first table level with both data from the figurative API with JSON data as well as got i18next working for the headings.
JSON
{
"metadata":{
"storesInTotal":"25",
"storesInRepresentation":"2"
},
"storedata":[
{
"store" : {
"storeId" : "1000",
"storeName" : "Store 1",
"storePhone" : "+46 31 1234567",
"storeAddress": "Some street 1",
"storeCity" : "Gothenburg"
},
"data" : {
"startDate" : "2013-07-01",
"endDate" : "2013-07-02",
"costTotal" : "100000",
"salesTotal" : "150000",
"revenueTotal" : "50000",
"averageEmployees" : "3.5",
"averageEmployeesHours" : "26.5",
"dayData" : [
{
"date" : "2013-07-01",
"cost" : "25000",
"sales" : "15000",
"revenue" : "4000",
"employees" : "3",
"employeesHoursSum" : "24"
},
{
"date" : "2013-07-02",
"cost" : "25000",
"sales" : "16000",
"revenue" : "5000",
"employees" : "4",
"employeesHoursSum" : "29"
}
]
}
},
{
"store" : {
"storeId" : "2000",
"storeName" : "Store 2",
"storePhone" : "+46 8 9876543",
"storeAddress": "Big street 100",
"storeCity" : "Stockholm"
},
"data" : {
"startDate" : "2013-07-01",
"endDate" : "2013-07-02",
"costTotal" : "170000",
"salesTotal" : "250000",
"revenueTotal" : "80000",
"averageEmployees" : "4.5",
"averageEmployeesHours" : "35",
"dayData" : [
{
"date" : "2013-07-01",
"cost" : "85000",
"sales" : "120000",
"revenue" : "35000",
"employees" : "5",
"employeesHoursSum" : "38"
},
{
"date" : "2013-07-02",
"cost" : "85000",
"sales" : "130000",
"revenue" : "45000",
"employees" : "4",
"employeesHoursSum" : "32"
}
]
}
}
],
"_links":{
"self":{
"href":"/storedata/between/2013-07-01/2013-07-02"
}
}
}
Visual example - JSFiddle
Check the values in the result frame, top left corner. Try clicking for example row with Store ID 2000, then with 3000 and then 3000 again to see how the values change.
Current update of my JSFiddle
Wanted functionality
When a row is clicked (as shown in the JSFiddle), I want a directive or something triggered, to go and fetch underlying data (dayData) for the store clicked and show all days in the date interval. I.e expanding the row, and including a new table under the clicked row, which also should use ng-repeat to get all data displayed similar to the existing one, but inline.
Question
So I have already got the functionality to get the $index and also the specific data from the clicked row.
What kind of directive or any other solution do I need additionally to get the "data when row clicked" and presented in a table under the clicked row?
I don't want it in the DOM all the time, since there might be many dayData for each store and many stores. (And will use pagination later, but even so, not in the DOM all the time.)
This means that I have to be able to ADD when clicking a row, and when clicking the same or another REMOVE from the previously clicked.
EDIT
New updated JSFiddle.
The requirement was to not fill the DOM with all second level tables and I came up with a solution for it.
First I tried creating a custom directive and I got it to insert a row at the right place (beneath the clicked row) and created a second level table with headers but could not get it to populate with rows using ng-repeat.
Since I could not find a solution that worked fully I went back to what I already had created, with ng-show and sought a solution like it...and there exist one.
Instead of using ng-show/ng-hide, Angular has a directive called ng-switch.
In level one
<tbody data-ng-repeat="storedata in storeDataModel.storedata"
data-ng-switch on="dayDataCollapse[$index]">
...and then in the second level, i.e. the second tr
<tr data-ng-switch-when="true">
, in which you have the second level ng-repeat.
Here's a new JSFiddle.
Inspect elements, and you will see that there is a comment placeholder for each "collapsed" level 2 table.
UPDATE (2014-09-29)
Upon request of also expanding/collapsing level 3, here's a new JSFIDDLE.
NOTE! - This solution have all information in the DOM at all times, i.e. not as the earlier solution, which only added a notation for where the information should be added upon request.
(I can't take credit of this one though, since my friend Axel forked mine and then added the functionality.)
I think that a better solution is to use the ng-repeat-start and ng-repeat-end directives on the tr elements rather than using the ng-repeat on the tbody (this case doesn't justify more than a single tbody).
Have a look here:
PLNKR
<tr ng-repeat-start="person in people">
<td>
<button ng-if="person.expanded" ng-click="person.expanded = false"></button>
<button ng-if="!person.expanded" ng-click="person.expanded = true"></button>
</td>
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
</tr>
<tr ng-if="person.expanded" ng-repeat-end="">
<td colspan="3">{{person.details}}</td>
</tr>
I don't have enough reputation yet to comment, so I'm following up in an answer with an additional functionality issue I have come across. I used Pixic's structure successfully as I really like that the DOM is not polluted with the second level data/tables until they are viewed and it is all working perfectly.
Until I was asked to allow dynamic sorting of the top level table. No problem - I can sort the top level table. The problem is I have been unable to come up with a way to keep the second level table (ie hidden ) synced up and "moving" with the sort of the top level table. This is a display only issue. The underlying data is properly associated with the top level, but the display is messed up as it displays the original "indexed" row as the second level tables don't re-sort with the parent row.
The only thing I can come up with is dynamically inserting the second level html from the controller upon expanding a row, but wondering if anyone else had any other ideas. I tried ng-repeat-start and ng-repeat-end (on a hidden third tr tag to include all elements thinking that should keep all items in the tbody together, and on a hidden tbody), but that didn't work.
Edit:
As requested, I have started another question: Multi-level tables (inside another if clicked) and Dynamic Sorting of Top Level Table