I have:
<tr ng-class="{{line.color}}" ng-repeat="line in gameRank | orderBy: sortType: sortReverse">
<td>{{$index + 1}}</td>
<td>{{line.username}}</td>
<td>{{line.games}}</td>
<td>{{line.winners}}</td>
</tr>
When I open debugger I see:
<tr class="ng-scope" ng-class="BLUE" ng-repeat="line in gameRank | orderBy: sortType: sortReverse">
<td class="ng-binding">1</td>
<td class="ng-binding">Admin</td>
<td class="ng-binding">0</td>
<td class="ng-binding">0</td>
</tr>
So, my class BLUE is not applied to my element.
How can I fix it?
It should be
<tr ng-class="line.color" ...>
Instead of
<tr ng-class="{{line.color}}" ...>
JSFiddle demo
Related
My html table shows NaN value because of field name has a symbol(/) in between.
below is my code
<tr ng-repeat="user in msg.options | orderBy:sortType:sortReverse | filter:search track by $index"
ng-click="msg.payload = user.send(msg);" style="width:100%" flex>
<td ng-bind="$index+1"></td>
<td ng-bind="user.PalletID"></td>
<td ng-bind="user.Description"></td>
<td ng-bind="user.Location"></td>
<td ng-bind="user.Empty/NonEmpty"></td>
<td style="text-align:center" ng-click="msg.payload = user.send(msg);" >
<img src="http://192.168.137.1:1880/ui/Images/unload32.png" width="30" height="30">
</td>
</tr>
Please help to resolve this issue.
I am new to AngularJs and ng-table, I tried to sort the ng-table with the sortable attribute its working fine but I had a row with the final result, here how can I use sortable with out impact on a specific row?
<table ng-table="tableParams" ng-model="Controller.data" class="table" show-filter="true">
<tr ng-if="entry.task_name!='Totals'" ng-class="{info: $even, active: $odd}" ng-repeat="entry in $data">
<td data-title="'Task Name'" sortable="'taskName'" filter="{ 'taskName': 'text' }"><div ng-show="entry.taskName!=false">{{entry.taskName}}</div></td>
<td data-title="'Planned Hours'" sortable="'plannedHours'">{{entry.plannedHours}}</td>
<td></td>
</tr>
<tr ng-if="entry.task_name ==='Totals'" ng-class="{info: $even, active: $odd}" ng-repeat="entry in $data">
<td data-title="'Task Name'" >{{entry.taskName}}</td>
<td data-title="'Planned Hours'">{{entry.plannedHours}}</td>
<td></td>
</tr>
<tr>
<td ng-show="repCtrl.noData" ng-bind="repCtrl.noData"></td>
</tr>
</table>
did you try to put this row in <tfoot>?
<table ng-table="tableParams" ng-model="Controller.data" class="table" show-filter="true">
<tbody>
<tr ng-class="{info: $even, active: $odd}" ng-repeat="entry in $data | filter: myFilter">
<td data-title="'Task Name'" sortable="'taskName'" filter="{ 'taskName': 'text' }">
<div ng-show="entry.taskName!=false">{{entry.taskName}}</div>
</td>
<td data-title="'Planned Hours'" sortable="'plannedHours'">{{entry.plannedHours}}</td>
<td></td>
</tr>
<tr>
<td ng-show="repCtrl.noData" ng-bind="repCtrl.noData"></td>
</tr>
</tbody>
<tfoot>
<tr ng-repeat="entry in $data | filter: {taskName:'Totals'}">
<td>{{entry.taskName}}</td>
<td>{{entry.plannedHours}}</td>
<td></td>
</tr>
</tfoot>
</table>
<script>
$scope.myFilter = function (item) {
return item.taskName !== 'Totals';
};
</script>
my plnkr with different data, but working as you expected: http://plnkr.co/edit/Rx7Kqp?p=preview
I need to add extra HTML tags within an angularjs loop like so:
<div ng-repeat="fixture in fixtures.fixtures ">
<tr>
<th class="date" colspan="5">{{fixture.date | cmdate:'MM/dd/yyyy'}}</th>
</tr>
<tr>
<td>{{teamName(fixture.homeTeam) }}</td>
<td> {{score(fixture.goalsHomeTeam)}}</td>
<td>-</td>
<td>{{score(fixture.goalsAwayTeam)}} </td>
<td>{{teamName(fixture.awayTeam)}}</td>
</tr>
</div>
however no data is retrieved when I do that, if I have it coded as follows it does work:
<tr ng-repeat="fixture in fixtures.fixtures ">
<td>{{fixture.date | cmdate:'MM/dd/yyyy'}}</td>
<td>{{teamName(fixture.homeTeam) }}</td>
<td> {{score(fixture.goalsHomeTeam)}}</td>
<td>-</td>
<td>{{score(fixture.goalsAwayTeam)}} </td>
<td>{{teamName(fixture.awayTeam)}}</td>
</tr>
what would be the problem?
I am trying to make it so if in my table a status is 'R' then it will replace that 'R' with the glyphicon, glyphicon glyphicon-alert.
I've thought of different ways of doing it such as making it a true or false condition because having 'G' appear is not necessary (if you could assist with making it if it is 'G' display ' ' that would be of use too) but I haven't made much headway with that.
Can someone assist in this?
This is a plnkr of the code in question.
http://plnkr.co/edit/CTRlMFnw4bxXy8wYHTSP?p=preview
<tbody>
<tr class="tt" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat- start="x in projects | filter:query | filter:myFilter | orderBy:orderProperty">
<td class="shrink"><b>{{x.a}}</b></td>
<td class="shrink">{{x.b}}</td>
<td class="shrink"><u>{{x.c}}</u></td>
<td class="shrink">{{x.d}}</td>
<td class="shrink">{{x.e}}</td>
<td class="shrink">{{x.f}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="6">
<h3>Test</h3>
<p>Test</p>
</td>
</tr>
</tbody>
I would fix it like this
<tr class="tt" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProperty">
<td ng-class="{'glyphicon glyphicon-alert': x.a == 'R'}"><b ng-if="x.a != 'R'">{{x.a}}</b></td>
<td class="shrink">{{x.b}}</td>
<td class="shrink"><u>{{x.c}}</u></td>
<td class="shrink">{{x.d}}</td>
<td class="shrink">{{x.e}}</td>
<td class="shrink">{{x.f}}</td>
</tr>
The very 1st row of EVERY tbody is the row header (contains the column Names). The rest of EVERY tbody succeeding 1st rows are not necessary and wanted to hide them.
Classes used:
toprowHeader = 1st row that holds every column names
recordsRow = holds the other record details
For now it shows like this:
--------------------------------------------
| MessageID | Sender | Message |
--------------------------------------------
| 1 | admin |my admin message |
--------------------------------------------
| MessageID | Sender | Message |
--------------------------------------------
| 2 | sender1 |reply to admin |
Here is the sample structure I wanted to achieve:
--------------------------------------------
| MessageID | Sender | Message |
--------------------------------------------
| 1 | admin |my admin message |
| 2 | sender1 |reply to admin |
Though I have some options to make it easier but the requirement says that every record should be inside a tbody
Here is my Sample Table structure:
<table class="gridtable">
<tbody>
<tr class="toprowHeader" >
<td class="">...</td>
</tr>
<tr class="recordsRow " >
<td class="">...</td>
</tr>
<tr class="recordsRow " >
<td class="">...</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">...</td>
</tr>
<tr class="recordsRow ">
<td class="">...</td>
</tr>
<tr class="recordsRow ">
<td class="">...</td>
</tr>
</tbody>
</table>
Added requirement:
A lot of you questioned the table structure above but the main reason why I placed it inside individual tbody its because I also have a button to be able to move the 1st tbody to the bottom/last of the table.
I use PHP to display records
see output below ,Use this
It Will hide all the toprowHeaders except the first one as per your requirement
$('tr.toprowHeader:gt(0)').hide();
$('table').append($('tbody:eq(0)'));
console.log($('tbody:eq(0)'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="gridtable">
<tbody>
<tr class="toprowHeader" >
<td class="">title 1</td>
</tr>
<tr class="recordsRow " >
<td class="">record1</td>
</tr>
<tr class="recordsRow " >
<td class="">record1</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title2</td>
</tr>
<tr class="recordsRow ">
<td class="">record2</td>
</tr>
<tr class="recordsRow ">
<td class="">record2</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title3</td>
</tr>
<tr class="recordsRow ">
<td class="">record3</td>
</tr>
<tr class="recordsRow ">
<td class="">record3</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title4</td>
</tr>
<tr class="recordsRow ">
<td class="">record4</td>
</tr>
<tr class="recordsRow ">
<td class="">record4</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title5</td>
</tr>
<tr class="recordsRow ">
<td class="">record5</td>
</tr>
<tr class="recordsRow ">
<td class="">record5</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title6</td>
</tr>
<tr class="recordsRow ">
<td class="">record6</td>
</tr>
<tr class="recordsRow ">
<td class="">record6</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title7</td>
</tr>
<tr class="recordsRow ">
<td class="">record7</td>
</tr>
<tr class="recordsRow ">
<td class="">record7</td>
</tr>
</tbody>
</table>
You can use CSS as shown below:
tbody:not(:first-child) .toprowHeader{
display: none;
}
<table class="gridtable">
<tbody>
<tr class="toprowHeader">
<td>Title</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td>Title</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
</tbody>
</table>
By the way, You should really try modifying the script to omit the extra titles instead (whichever generates it), and have a single title row inside <thead>