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.
Related
I am using this react-bootstrap table:
which it's HTML code is:
<Table striped bordered hover>
<thead>
I was trying to add the code here.
<tr>
<th>#</th>
<th>App</th>
<th>Domain Name</th>
<th>Pub Account ID</th>
<th>Relationship</th>
<th>Certification ID</th>
<th>Last update</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox" id={'checkboxThick'+network.id} onClick={()=>this.checkCheckbox(network.id)}/></th>
<td>{network.product}</td>
<td>{network.domain_Name}</td>
<td>{network.publisher_Id}</td>
<td>{network.relationship}</td>
<td>{network.certification_Id}</td>
<td>{network.lastUpdate}</td>
<td className="actionCoulmn">
</td>
</tr>
</tbody>
</Table>
And I need to add this div as a part of the table:
I was trying to add some divs and styles to the <tr> and <th> with no success.
Does someone have any idea how to deal with it?
You could settle with this:
<div id="parent">
<div /> // your div here
<table /> // your existing table component
</div>
and use styling to merge them
I have a Html Table
<div class="clearfix">
<table class="table table-contract-module">
<thead>
<tr>
<th>Group Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cli in creativeGroupMarket">
<td>{{cli.GroupName}}</td>
<td>
<a>Edit</a>
<a ng-click="deleteCreativeMarket(cli.GroupID)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
The Table Format Looks Like
Now When I Click Edit Button here I need user to be able to edit Group Name in textbox and Edit button should be replaced by Update.
After I Click Edit button on 1st row of the table the table should Look Like :-
How Can I do this?
<tr ng-repeat="cli in creativeGroupMarket">
<td ng-show="cli.edit_mode">{{cli.GroupName}}</td>
<td ng-show="!cli.edit_mode"><input ng-model="cli.GroupName"></td>
<td>
<a ng-click=cli.edit_mode=true>Edit</a>
<a ng-click="deleteCreativeMarket(cli.GroupID)">Delete</a>
</td>
</tr>
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>
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>
Following is the code from a .hbs file to create multiple tables one after another.
At the end there are two <br> tags to ensure two line breaks between the different tables created
{{#each container}}
<div>
<table class="table table-responsive table-condensed table-bordered" style="margin-left:0px;float: left;align:left;">
<thead>
<tr>
<th style="color:rgb(68, 67, 67);font-weight: normal;">...</th>
</tr>
</thead>
<tbody>
{{#each variable}}
<tr>
<td style="border:none;">...</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<br><br>
{{/each}}
But after using this hbs to create an html page, the two line breaks are not visible. How to get this working?
Instead of br use inline style and add margin-bottom
{{#each container}}
<div style:"margin-bottom:30px;">
<table class="table table-responsive table-condensed table-bordered" style="margin-
left:0px;float: left;align:left;">
<thead>
<tr>
<th style="color:rgb(68, 67, 67);font-weight: normal;">...</th>
</tr>
</thead>
<tbody>
{{#each variable}}
<tr>
<td style="border:none;">...</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/each}}
The issue is with the line-height of <br> element and nothing to do with Handlebars. You could write inline style to handle the space and may use one instead of two.
<br style="line-height: 5rem;" />
Hope this helps.