Hi i am working angularjs application code
when i trying to update any value or field in js file i will show changes when i refresh browser but when i changes in html file it is not slowing any changes
i am not sure it will work like js file or i need to do some thing deffenent
<div ng-if="companyProfile.loansAndRatings[0].ratings != undefined" >
<div class="panel-heading">Credit ratings</div>
<hr class="loan-margin">
<div class="panel-body">
<table class="table table-bordered ">
<thead>
<tr>
<th>Agency</th>
<th>Instrument</th>
<th>Instrument Details</th>
<th>Rating</th>
<th>Outlook</th>
</tr>
</thead>
<tbody class="fontSynopsis">
<tr ng-repeat="creditRatings in companyProfile.loansAndRatings[0].ratings track by $index">
<td>{{creditRatings.agency}}</td>
<td>{{creditRatings.instrument}}</td>
<td>{{creditRatings.instrumentDetails}}</td>
<td>{{creditRatings.rating}}</td>
<td>{{creditRatings.outlook}}</td>
</tr>
</tbody>
</table>
</div>
</div>
When i update code and any value static value that not slowing after i refresh page
<div ng-if="companyProfile.loansAndRatings[0].ratings != undefined" >
<div class="panel-heading">Credit ratings</div>
<hr class="loan-margin">
<div class="panel-body">
<table class="table table-bordered ">
<thead>
<tr>
<th>Agency</th>
<th>Instrument</th>
<th>Instrument Details</th>
<th>Rating</th>
<th>Outlook</th>
</tr>
</thead>
<tbody class="fontSynopsis">
<tr ng-repeat="creditRatings in companyProfile.loansAndRatings[0].ratings track by $index">
<td>{{creditRatings.instrument}}</td>
<td>{{creditRatings.instrument}}</td>
<td>{{creditRatings.instrumentDetails}}</td>
<td>{{creditRatings.rating}}</td>
<td>{{creditRatings.outlook}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
Firstly, here is my UI:
My output to my right displayed as a result of using the tag <tbody> inside my ajax:
success: function (response){
var tbody="";
$.each(response.all_categories, function (key, cat) {
tbody+=`
<tr>
<td class="p-0 btn-category-list-col">
<button id="submit" type="submit" class="btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name}</button>
</td>
</tr>`; });
$('tbody').html(tbody) }
My problem is that I am using two <tbody> in this same page, so the table to the right shows up in the left:
Is there some way to make my ajax function read a class or an id instead of the tag itself?:
So kind of like my line tbody+= becomes: tbody(class/id)+=
Here is my table that uses two tbody tags:
<div class="col-md-2 border">
<table id="categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
any help would be appreciated thanks
If you didn't use the same IDs for both tables(which is invalid html by the way) you could have used the table id to select the correct one.
From the html above you could use the table class to identify it
$('table.table-striped tbody').html(tbody);
or you could fix the invalid duplicate ids and use the id to select the correct table
<div class="col-md-2 border">
<table id="side-categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="main-categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
$('#main-categoryList tbody').html(tbody);
Why bootstrap responsive table is not working with dir-paginate.
I have created a responsive grid HTML table by using bootstrap which is working with hard-coded data, but when my angular developer colleague used some 'dir-paginate' for retrieving data from the database then my responsive design code is not working when minimizing the browser shorter.
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<tr>
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I think you are using the directive at the wrong Position. You want to repeat the <tr>-element instead of the <tbody>-element.
For more Information look at this answer: https://stackoverflow.com/a/34392061/7225524
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have the following table:
<div>
<table class="table-alignment table table-striped">
<tr class="text text-center">
<th>Symbol</th>
<th>Quantity</th>
<th>Timestamp</th>
<th>Amount</th>
</tr>
<div *ngIf="loading == true" class="loader loader-alignment"></div>
<div *ngIf="loading == false">
<tr *ngFor="let s of stats" class="text text-center" [ngClass]="{'text-success' : s.transaction_type=='BUY', 'text-danger' : s.transaction_type=='SELL'}">
<td>{{s.tradingsymbol | formatSymbol}}</td>
<td>{{s.filled_quantity}}</td>
<td>{{s.order_timestamp}}</td>
<td>{{s.average_price}}</td>
</tr>
</div>
</table>
</div>
The problem here is that the entire tr is rendered in 1st column. How do i fix this?
Consider using the basic HTML elements thead and tbody.
Also, for example you don't have to write loading == false, write !loading instead.
<div>
<table class="table-alignment table table-striped">
<thead>
<tr class="text text-center">
<th>Symbol</th>
<th>Quantity</th>
<th>Timestamp</th>
<th>Amount</th>
</tr>
</thead>
<div *ngIf="loading" class="loader loader-alignment"></div>
<tbody *ngIf="!loading">
<tr *ngFor = "let s of stats" class = "text text-center" [ngClass]="{'text-success' : s.transaction_type=='BUY', 'text-danger' : s.transaction_type=='SELL'}">
<td>{{s.tradingsymbol | formatSymbol}}</td>
<td>{{s.filled_quantity}}</td>
<td>{{s.order_timestamp}}</td>
<td>{{s.average_price}}</td>
</tr>
</tbody>
</table>
</div>
I cant seem to get this right, i made a divider through css divs and it shows on page but when in print the lines i made doesnt show..what other options should i do? im running out of ideas, what am i doing wrong how can i achieve this
here is what i want ot achieve
heres my css
heres the print preview
page code:
<div id="page-wrapper">
<div class="row">
<div class="col-md-12">
<div class="panel-body">
<p style="text-align:center;"><b>PROPERTY ACKNOWLEDGEMENT RECEIPT</b></p>
<p style="text-align:right;">Control No.</p>
<div class="row">
<div class="col-md-16">
<table class="table table-hover table-striped table-bordered table-condensed" class="">
<thead>
<tr>
<th style="text-align:center;">Quantity</th>
<th style="text-align:center;">Unit</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center;">Unit Value</th>
<th style="text-align:center;">Property No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>bucket</td>
<td style="font-size:12px;">oremloremloremloremloremloremloremloremloremlorem</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr style="background-color:black;"> NOTE:
<div style="height:2px;width:100%;background-color:black;"></div>
<div style="width:2px;height:100px;background-color:black;margin:0px auto;"></div>
</div>
</div>
</div>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
I am using Angular js ;
inside my view template I have a Table
I want each row of my table which is populated by an element from my model to be a link to another page.
I tried the commented line of code but it does not work!
Thanks for Your help!
Cheers!
<section data-ng-controller="AllsController" data-ng-init="find()">
<div class="page-header">
<h1>Alls</h1>
</div>
<div class="list-group">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Created</th>
<th>User</th>
<th>Name</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="all in alls">
<!-- <a data-ng-href="#!/alls/{{all._id}}" > -->
<td data-ng-bind="all.created | date:'medium'"></td>
<td data-ng-bind="all.user.displayName"></td>
<td data-ng-bind="all.name"></td>
<td data-ng-bind="all.color"></td>
<!-- </a> -->
</tr>
</tbody>
</table>
</div>
You can do something like
<tr ng-click="onClick()"> and in your onClick function you can write your logic. If you want to redirect to some page you can use $location service of angularjs.