I am trying to add a second row (<tr>) in the code below for each event in events in the ng-repeat. However, it only adds a single row at the end, I need each new row (class="info") to be BETWEEN each of the other rows with the rel attribute.
The cell in the info row will be filled via ajax and toggled when the Details link is clicked, it will then be toggled again when the Close link is clicked (Details changes to Close). It will work similar to this fiddle: http://jsfiddle.net/Mrbaseball34/btwa7/
How would I do that in AngularJS?
<tbody id="events_tbody">
<tr ng-repeat="event in events" rel="{{event.EVE_EVENT_CODE}}">
<td>{{event.COURSE_TYPE}}</td>
<td>{{event.EVE_FORMAL_DATE}}</td>
<td>{{event.EVE_DESCRIPTION}}</td>
<td>{{event.PRICE | dollars}}</td>
<td class="nb">
Details
</td>
</tr>
<!-- Now add Details row: -->
<tr class="info" style="display:none;">
<td colspan="5" id="info_{{event.EVE_EVENT_CODE}}"></td>
</tr>
</tbody>
You need to make use of the special ng-repeat-start and ng-repeat-end attributes (explained here):
<tbody id="events_tbody">
<tr ng-repeat-start="event in events" rel="{{event.EVE_EVENT_CODE}}">
<td>{{event.COURSE_TYPE}}</td>
<td>{{event.EVE_FORMAL_DATE}}</td>
<td>{{event.EVE_DESCRIPTION}}</td>
<td>{{event.PRICE | dollars}}</td>
<td class="nb">
Details
</td>
</tr>
<!-- Now add Details row: -->
<tr ng-repeat-end class="info" style="display:none;">
<td colspan="5" id="info_{{event.EVE_EVENT_CODE}}"></td>
</tr>
</tbody>
Related
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 was trying to use ng-repeat to create a table, but I couldn't figure out how to get it to work. My best attempt was the below.
<table ng-repeat="j in [0,1,2,3,4,5,6,7]">
<tr>
<th>
Header {{j+1}}
</th>
</tr>
<tr ng-repeat="i in [0,1,2,3,4,5,6,7]">
<td>
{{i+1}} , {{j+1}}
</td>
</tr>
</table>
any ideas?
So to begin with, the ng-repeat attribute is on the table, meaning that you are repeating this element as many times as there are entries in your array. Knowing that "tr" stands for the rows, and "td" for different sections in your rows.
You could try:
<table>
<tr><!--this is your header row -->
<th>
Header {{j+1}}<!-- this is a header section, you can repeat here or use it as a title -->
</th>
</tr>
<tr ng-repeat="j in [0,1,2,3,4,5,6,7]"><!-- repeat the rows -->
<td ng-repeat="i in [0,1,2,3,4,5,6,7]"><!-- repeat the sections -->
{{i+1}} , {{j+1}}<!-- here you can display i, j whatever else -->
</td>
</tr>
</table>
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.
How can I show individual group sum and total sum of a column for angular js ng Table?
http://bazalt-cms.com/ng-table/example/12.
Plunk that present how you can show group sum (for example sum of all ages of people).
Check function $scope.GetSummOfAges in controller.
Detailed explanation
Instead of applying ng-repeat directive for $data variable ,you first need to apply that for groups of item ($groups var) and then there second nested ng-repeat for items in each group ,and thus near nested directive you can apply any function for group items,like here
Index.html
<tbody ng-repeat="group in $groups">
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<a >
<<strong>{{ group.value }}</strong>
</a>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
<tr><td><b>summ of ages</b></td><td>{{GetSummOfAges(group)}}</td></tr>
</tbody>
App.js
$scope.GetSummOfAges=function(group){
var summ=0;
for(var i in group.data)
{
summ=summ+Number(group.data[i].age);
}
return summ;
};
Note:
since Angular 1.2 you better use ng-repeat-start to propagate <tr> tag,instead of <tbody> tag like in example
The following table row is typical.
<tr ng-repeat="item in items">
<td>{{item.id}}</td>
<td>{{item.subject}}</td>
<td>{{item.author}}</td>
<td>{{item.date}}</td>
</tr>
but, how to repeat two rows to each?
<tr ??>
<td rowspan=2>{{item.id}}</td>
<td colspan=2>{{item.subject}}</td>
</tr>
<tr ??>
<td>{{item.author}}</td>
<td>{{item.date}}</td>
</tr>
If you're using AngularJS 1.2+, you can use ng-repeat-start and ng-repeat-end:
<tr ng-repeat-start="item in items">
<td rowspan=2>{{item.id}}</td>
<td colspan=2>{{item.subject}}</td>
</tr>
<tr ng-repeat-end>
<td>{{item.author}}</td>
<td>{{item.date}}</td>
</tr>
See "Special repeat start and end points" in the ngRepeat docs.
Otherwise, you have to resort to some nasty tricks, like wrapping the trs in a tbody element and repeating that.