I want to save the flight number to be able to access it in another html page using the controller and service
My code
<table class="headers">
<thead>
<tr>
<th> Choose Flight</th>
<th> Departs From</th>
<th> Destination</th>
<th> Departs </th>
<th> Flight Number </th>
<th > Price </th>
</tr>
</thead>
</div>
</td>
<tbody ng-repeat="flight in flights" >
<td>
<input type="radio" name="id">
</td>
<!-- <tr ng-repeat="Flight in Flights"> -->
<!-- <td>{{Flight.FlightNumber}}</td> -->
<td>{{flight.origin}}</td>
<td>{{flight.destination}}</td>
<td>{{flight.departureDate}}</td>
<td>{{flight.flightNumber}}</td>
<td>{{p}}</td>
<!-- </tr> -->
</tbody>
</table>
I suppose you using Angular 1 (is it true to Angular 2 anyway).
You have to bind value to your controller by using ng-model (using input). Then store it at your convenience (session, database...) and pass it to an other page.
There is documentation : https://docs.angularjs.org/api/ng/directive/ngModel
Related
I have created a table which is already populated by some data. Now I want to filter the results in the table based on a selection in a dropdown value. How Could I do this in React? Can someone guide or provide a sample code to showcase the result?
Below is my code sample:
Dropdown:
<table>
<tbody>
<tr> <td>
<label className="col-form-label"> Auditee </label> </td>
<td className="td-padding td-space">
<select className="form-control dpwidth" onChange={this.optionSelected.bind(this)}>
<option>Select</option>
{this.renderAuditee()}
</select>
</td>
<td> <label className="col-form-label lbl-space"> SME </label></td>
<td className="td-padding">
<select className="form-control dpwidth" onChange={this.optionSelected.bind(this)}>
<option>Select</option>
{this.renderSME()}
</select>
</td>
<td> <label className="col-form-label lbl-space"> Year </label></td>
<td className="td-padding">
<select className="form-control dpwidth" name="Year" onChange={this.handlePeriodChange.bind(this,this)} disabled={this.state.isChecked}>
<option>Select</option>
{this.renderYear()}
</select>
</td>
</tr>
</tbody>
</table>
Data in Table:
<table className="table table-striped table-highlight">
<span className="head">Review2</span>
<tbody>
<tr>
<th> Project ID </th>
<th> Project Name </th>
<th> SME </th>
<th> Auditor </th>
<th> EEECPM</th>
<th> WorldArea </th>
<th> Country </th>
<th> FY Year </th>
<th> FY Period </th>
<th> Review1 Date </th>
<th> No. of Obs. </th>
<th> Total Recom. </th>
<th> Accepted Recom.</th>
</tr>
{
filteredData.length? this.renderTableData(filteredData) : this.renderTableData(data)
}
</tbody>
</table>
As component is rerndered everytime state changes, you should put your filteredData in a state, and update this state with filtered data via setState every time the filter dropdown is clicked. More code will help. I cannot comment so answering here
You can have a sample code in my repo, please check code in development branch.
https://github.com/upretim/react-data-filter
It is bit refined and updated to functional components version of official text, you can check it here:
https://reactjs.org/docs/thinking-in-react.html
Primarily you need to do this:
Create a parent component above, table and drop down.
Update state of parent component, when dropdown is selected.
Pass the value of filter and table data as prop in table component.
So parent of table and dropdown would be a stateful component and table and dropdown would be functional components, receiving props from parent's state
is it possible to display the paging of a html table in the url? Would appreciate if someone could teach or gimme a link to learn about it. Can't seem to find it anywhere. Thanks!
Table code :
<div id="btnDLContainer">
<button onclick="exportTableToExcel('tableToCsv')" type="button contact-button" class="btnDL">XLSX Download</button>
<button export-to-csv class="btnDL">CSV Download</button>
<table ng-show="auditoriums === 'none'">
<tr> <th> Name </th> <th> Address Block No. </th> <th> Postal Code </th> <th> Street Name </th> </tr>
<tr ng-repeat="audit in auditoriums| limitTo: 1 - auditoriums.length">
<td>{{audit.NAME}}</td>
<td>{{audit.ADDRESSBLOCKHOUSENUMBER}}</td>
<td>{{audit.ADDRESSPOSTALCODE}}</td>
<td>{{audit.ADDRESSSTREETNAME}}</td>
</tr>
</table>
</div>
I am using ng-repeat to bind the data but there is an issue that there is an image in a data which I am showing in image column by using {{obj.Image}}
Here is my code
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
Sr. no.
</th>
<th>
Title
</th>
<th>
Image
</th>
<th>
Category
</th>
<th>
SubCategory
</th>
<th>
PostedOn
</th>
<th>
Created By
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in PostedBlogList">
<td>{{$index+1}}</td>
<td><a ng-href="{{'//'+obj.PageUrl }}">{{obj.Title}}</a></td>
<td> <img style="width:90px"src="{{obj.Image}}" /></td>
<td>
{{obj.CategoryName}}
</td>
<td>
{{obj.SubCategoryName}}
</td>
<td>
{{obj.CreatedDate}}
</td>
<td>
<button class="btn btn-primary" type="submit" value="Activate">Activate</button>
</td>
<td>
<button class="btn btn-primary" type="submit" value="Activate">Activate</button>
</td>
</tr>
</tbody>
</table>
I want to display the default image <img src="~/images/mail.png" alt="">
in <td> <img style="width:90px"src="{{obj.Image}}" /></td>
when my object {{obj.Image}} is null.
How can i check the condition?
There are multiple ways to do that.
You can use two img tags and use ng-show to hide one of them depending on obj.image:
<img ng-show="obj.Image" src="{{obj.Image}}">
<img ng-show="!obj.Image" src="default">
You can also have a function in your controller which returns the proper url:
<img src="{{getImage(obj.Image)}}">
$scope.getImage(img) = function{
return img ? img : '~/images/mail.png';
};
You could call a controller a function to decide what the URL would be.
ng-href="{{ showImage(obj) }}"
Code
$scope.showImage = function(obj){
return obj.PageUrl ? '//'+ obj.PageUrl: '~/images/mail.png'
}
I'm trying to implement FooTable-2 in my project, but for some reason I can't get the pagination working.
I'm following THIS tutorial and here is what I have so far as a table code:
<div id="mainContent">
<div id="allTrackersDiv" style="display: none;">
<label><b>Active Trackers</b></label>
<table class="activeTrackersTable" id="allTrackersTable"
data-page-navigation=".pagination">
<thead>
<tr>
<th> ID </th>
<th> col 1 </th>
<th> col 2 </th>
<th> col 3 </th>
</tr>
</thead>
<tbody data-bind="foreach: trackersObjArray">
<tr data-bind="click: test">
<td><span data-bind="text: tId"></span></td>
<td><span data-bind="text: tname"></span></td>
<td><span data-bind="text: pname"></span></td>
<td><span data-bind="text: tcreate"></span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="pagination"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
The problem is that the paging is not working. I have 22 records in my table and it is supposed to start paging after the 10th record
Here is how it looks:
What am I missing here? At my point of view everything looks pretty fine. What am I missing, I really can't understand my mistake.
You can try mentioning
data-page-size="10"
explicitly.
And if that doesn't work, may be issue is due to dynamic data being added to footable.
Use
$('#myTable').append(html).trigger('footable_redraw');
So that footable will be redrawed and size limit will be applied.
Reference links: Footable data page size not respected and
Other issues due to dynamic data in footable
The idea is the following, if you click on a button for "show", an ajax-request will start, and the response will take place in a (hidden) <div>, and the <div> will come visible.
But the <div> gets placed wrong. it is in a <tr>, and should appear in it, between 1.1 and 1.2
Here is a fiddle, where i made an example, without the Ajax, it just display's/hide's the text "TEST"
http://jsfiddle.net/pt2w3/12/
How can this be solved correctly?
You forgot the cell (<td></td>):
<Label onclick="doShow()"> <p> ---- CLICK ME (show) ----- </p> </label>
<Label onclick="doHide()"> <p> ---- CLICK ME (hide) ----- </p> </label>
<table class="table">
<thead>
<th> TITLE 1 </th>
<th> TITLE 2 </th>
<th> TITLE 3 </th>
</thead>
<tbody>
<tr>
<td> 1.1</td>
<td> 2.1</td>
<td> 3.1</td>
</tr>
<tr>
<td><div class="class1" id="testdiv"><h1>TEST</h1> </div></td>
</tr>
<tr>
<td> 1.2</td>
<td> 2.2</td>
<td> 3.2</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/hescano/pt2w3/13/
Add an <td></td> tag to make the div display correctly:
Fiddle Example:
http://jsfiddle.net/agconti/pt2w3/14/
html
<Label onclick="doShow()"> <p> ---- CLICK ME (show) ----- </p> </label>
<Label onclick="doHide()"> <p> ---- CLICK ME (hide) ----- </p> </label>
<table class="table">
<thead>
<th> TITLE 1 </th>
<th> TITLE 2 </th>
<th> TITLE 3 </th>
</thead>
<tbody>
<tr>
<td> 1.1</td>
<td> 2.1</td>
<td> 3.1</td>
</tr>
<tr>
<td><div class="class1" id="testdiv"><h1>TEST</h1> </div></td>
</tr>
<tr>
<td> 1.2</td>
<td> 2.2</td>
<td> 3.2</td>
</tr>
</tbody>
</table>
Rendered like so:
---- CLICK ME (show) -----
---- CLICK ME (hide) -----
TITLE 1
TITLE 2
TITLE 3
1.1
2.1
3.1
TEST
1.2
2.2
3.2
It is invalid to place a div immediately inside a tr. You need to nest the div within a valid child of the tr instead. Otherwise, the browser will place the invalid element elsewhere, in this case it is positioning it before the table.
When in doubt, check the Specification. Specifically, check the Contexts in which this element can be used to know where you can place an element, and the Content model portion to understand what you can place immediately within that element: