I am getting my head around the ngtable. Just one question, how can I make the columns fixed width? In this sample the account and adviser column have variable width when going to the next page.
This is the html:
<table ng-table="tableParams" template-pagination="custom/pager" class="table">
<tr ng-repeat="account in $data | filter:accountName | filter:key" class="orders tablerow">
<td data-title="'ID'" sortable="'account.accountId.key'">
{{account.account.accountId.key}}
</td>
<td data-title="'Account'" sortable="'account.accountName'">
{{account.account.accountName}}
</td>
<td data-title="'Adviser'" sortable="'account.adviser.key'">
{{account.account.adviser.key}}
</td>
<td data-title="'Product'" sortable="'account.productName'">
{{account.account.productName}}
</td>
<td data-title="'Status'" sortable="'minOpenOrderState'">
{{account.minOpenOrderState}}
</td>
</tr>
</table>
Plunkr:http://plnkr.co/edit/vPQeVx?p=info
just add css for "td"
td{
width:20%;
float:left;
word-wrap:break-word;
}
Accepted answer is working perfectly, but it does not cover the case when most of the columns width does not matter, but 1-2 columns should have a fixed width (or at least not be squeezed)
One work-around is to force the width of a column by defining a fixed-width content. Something like this:
<td title="'TheTitle'" sortable="'PassedStr'">
<div style="width:120px">
<b>{{item.SomeCol}}</b>
<span ng-show="item.ErrorMessage">
{{item.OtherCol}}
</span>
</div>
</td>
Related
I need to bind data with row values to a table, when i'm using the data-ng-repeat-start and data-ng-repeat-end data is not binding correct format.
<table id="tbl">
<tbody>
<tr data-ng-repeat="data in RDetails" data-ng-if="Values(data)">
<td data-ng-repeat-start="d in data.Dtls" data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.V}}</span>
</td>
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.VP}}</span>
</td>
<td data-ng-if="ShowValuesBL(d)">
<span>{{d.AV}}</span>
</td>
<td data-ng-repeat-end="d in data.Dtls" data-ng-if="Values(d)">
<span>{{d.AVP}}</span>
</td>
</tr>
</tbody>
</table>
when I use the above condition table showing the same values how can i do this. Where i did mistake please help me on this Please see image here i am getting repeated values.
If I understand your problem correctly - just presenting content of every RDetails.Dtls element as a table row - here is solution:
<table id="tbl">
<tbody data-ng-repeat="data in RDetails">
<tr data-ng-repeat="d in data.Dtls" data-ng-if="Values(data)">
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.V}}</span>
</td>
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.VP}}</span>
</td>
<td data-ng-if="ShowValuesBL(d)">
<span>{{d.AV}}</span>
</td>
<td data-ng-if="Values(d)">
<span>{{d.AVP}}</span>
</td>
</tr>
</tbody>
</table>
Attached is my code, tried showing td data when the condtion of ng-if is true
<tbody>
<tr ng-repeat="fellow in fellowships">
<td>{{$index}}</td>
<td>{{fellow.Fellowship_Name}}</td>
<div ng-repeat="value in data_report"
ng-if="(fellow.F_Id==value.fellowship_id)? (show_row = true) : (show_row=false)">
<td ng-show="show_row">{{value.Completed}}</td>
<td ng-hide="show_row">0</td>
<td ng-show="show_row">{{value.Not_Updated}}</td>
<td ng-hide="show_row">0</td>
<td ng-show="show_row">{{value.Total_schedule}}</td>
<td ng-hide="show_row">0</td>
</div>
</tr>
</tbody>
Its just giving 0 as result. Though data_report is having values
Tried adding span in td with conditions in td and result in span.
still the result is zero
May I know where the logic is going wrong and how it can be achieved?
Changed the code to
<tbody>
<tr ng-repeat="fellow in fellowships">
<td>{{$index}}</td>
<td>{{fellow.Fellowship_Name}}</td>
<td>
<span ng-repeat="value in data_report" ng-show ="fellow.F_Id==value.fellowship_id">{{value.Completed}}</span>
</td>
<td>
<span ng-repeat="value in data_report" ng-show="fellow.F_Id==value.fellowship_id">{{value.Not_Updated}}</span>
</td>
<td>
<span ng-repeat="value in data_report" ng-show="fellow.F_Id==value.fellowship_id">{{value.Total_schedule}}</span>
</td>
</tr>
</tbody>
Here i am getting values but how can i set default value to zero if there are no values present?
In your case ng-if returns no boolean
The usage is (DOCs):
<ANY
ng-if="expression">
...
</ANY>
I think you dont need ng-if at all. You can write something like:
<tbody>
<tr ng-repeat="fellow in fellowships">
<td>{{$index}}</td>
<td>{{fellow.Fellowship_Name}}</td>
<div ng-repeat="value in data_report">
<td>{{(fellow.F_Id==value.fellowship_id) ? value.Completed: 0}}</td>
<td>{{(fellow.F_Id==value.fellowship_id) ? value.Not_Updated: 0}}</td>
<td>{{(fellow.F_Id==value.fellowship_id) ? value.Total_schedule: 0}}</td>
</div>
</tr>
</tbody>
Its not best solution, in Javascript you can set for example value.Completed to be by default 0. It will help you to simplify your HTML
I would like to ask you a question.
My wish is to create a table composed by 4 columns and show on table-data (3rd and 4th column of each row) an image of green circle when a variable (blocco1 or blocco2) is true and an image of red circle when the same variable is false.
This is my code
<tr ng-repeat="data in elencoTransazioni">
<td class="i9fontPre text-center" header-class="'i9header'">{{::data.code}}</td>
<td class="i9fontPre text-center" header-class="'i9header'">{{::data.desc}}</td>
<td class="i9fontPre text-center" header-class="'i9header'">
<img ng-if="data.blocco1=='true'" src="/i9web/mock/circleGreen.png">
<img ng-if="data.blocco1=='false'" src="/i9web/mock/circleRed.png">
</td>
<td class="i9fontPre text-center" header-class="'i9header'">
<img ng-if="data.blocco2=='true'" src="/i9web/mock/circleGreen.png">
<img ng-if="data.blocco2=='false'" src="/i9web/mock/circleRed.png">
</td>
</tr>
Can anyone could help me?
Thank you in advance
Try use ng-src.
<tr ng-repeat="data in elencoTransazioni">
<td class="i9fontPre text-center" header-class="'i9header'">{{::data.code}}</td>
<td class="i9fontPre text-center" header-class="'i9header'">{{::data.desc}}</td>
<td class="i9fontPre text-center" header-class="'i9header'">
<img ng-src="{{data.blocco2 ? '/i9web/mock/circleGreen.png'
:'/i9web/mock/circleRed.png'}}">
</td>
</tr>
In my AngularJS 1.3 application I have this calendar, the unique cells are clickable:
What I will do is that if mouse is over e.g. 12. April and of user 3 (Marktl) than
12. April 2017
Marktl
should be shown next to the mouse pointer.
Is there a way of doing this (maybe with support of AngularJS)?
Here my html code of the calendar written by my own:
<table class="absenceOverviewTable tableShadow">
<thead>
<tr class="first-header">
<th></th>
<th></th>
<th class="center first month-header" data-ng-repeat="value in vm.currentMonthNames track by $index">{{value}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="scheduleAbsenceUserContainer in filtered = (institution.scheduleAbsenceUserContainers">
<td>
<div class="userNameColumn" title="{{scheduleAbsenceUserContainer.institutionUserRole.value | translate}}"></div>
</td>
<td data-ng-repeat="scheduleAbsenceMonthContainer in scheduleAbsenceUserContainer.scheduleAbsenceMonthContainers">
<table class="days-table">
<tr>
<td data-ng-repeat="scheduleAbsenceDayContainer in scheduleAbsenceMonthContainer.scheduleAbsenceDayContainers track by $index">
<div class="data-table-pos border-color width-100">
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
It's not entirely clear from your original question exactly what behaviour you want.
If you want something to appear as a tooltip on hover of the cell, you could just use the regular html title attribute. Downside with that is it won't appear immediately, you have to hover for like 2 seconds.
If you want a tooltip to appear immediately, you could try something like Angular Material's tooltip: https://material.angularjs.org/latest/demo/tooltip
I have a HTML table and in several rows I have a Material Design button in each cell, dynamically generated using AngularJS.
<table class="plans">
<tbody>
<tr>
<td>Work Plans</td>
<td ng-click="pbmainController.selectPlan(plan.planName)"
ng-repeat="plan in pbmainController.planList">
<md-button class="md-raised">{{plan.planName}}</md-button>
</td>
</tr>
</tbody>
</table>
Only one of button can be selected at a time (i.e. like a radio button).
How do I change the color of the selected button?
I got it to work by putting the ng-class on the button, using the ternary operator
<table class="plans">
<tbody>
<tr>
<td>Work Plans</td>
<td ng-click="pbmainController.selectPlan(plan.planName)"
ng-repeat="plan in pbmainController.planList">
<md-button ng-class="plan.planName == selectedPlanName ? 'md-raised md-primary' : 'md-raised'">{{plan.planName}}</md-button>
</td>
</tr>
</tbody>
</table>
A ng-class attribute will do the trick.
In your function selectPlan you probably save the name somewhere. Assuming this var is named selectedPlan, you can do something like this :
<table class="plans">
<tbody>
<tr>
<td>Work Plans</td>
<td ng-click="pbmainController.selectPlan(plan.planName)"
ng-repeat="plan in pbmainController.planList">
<md-button ng-class="{'active' : plan.planName == selectedPlan}" class="md-raised">{{plan.planName}}</md-button>
</td>
</tr>
</tbody>
</table>
ng-class will be apply your class (here active) only when the condition is true. So only when your plan is the selected one.