Here is my html table
<table>
<tbody>
<tr class="unread" ng-repeat="CU in InboxList">
<td class="text-right mail-date">{{CU.time}}</td>
</tr>
<tr class="read">
<td class="text-right mail-date">12:00 pm</td>
</tr>
</tbody>
</table>
here in my html table there are two tr class one is tr class="read" and other is class="unread" I have already binded tr class="unread".now I want to check a condition if {{cu.isread=0}} then tr class read will bind otherwise tr class unread will bind.how to do this?
You could do this with ng-class
Example:
ng-class="(cu.isread === 0) ? 'unread' : 'read'"
You can achieve this using ng-class:
<tr ng-class="{'read' : cu.isread === 0, 'unread': cu.isread !== 0}">...</tr>
You can do something like this:
<table>
<tbody>
<tr data-ng-class="{unread: cu.isread == 0, read: cu.isread !=0}" ng-repeat="CU in InboxList">
<td class="text-right mail-date">{{CU.time}}</td>
</tr>
<tr class="read">
<td class="text-right mail-date">12:00 pm</td>
</tr>
</tbody>
</table>
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>
I have an array json as follows
$scope.array =[{"id":"1","age":"3","name":"ab"},{"id":"2","age":"2","name":"ee"},{"id":"3","age":"1","name":"dd"}];
I need to show these data in a table using ng-if where if the age is 1 then that cell should have only data related to age = 1 etc. I used the following code.
<html>
<table>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
<tr>
<tr ng-repeat="record in array">
<td ng-if="record.age == '1'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '2'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '3'">{{record.id}} {{record.name}}</td>
</table>
</html>
But currently all the values are shown in the first column one after the other. I can't figure out the reason.
Don't forget to close your tr tag with an end tag. Something like this:
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<tr ng-repeat="record in array">
<td ng-if="record.age == '1'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '2'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '3'">{{record.id}} {{record.name}}</td>
</tr>
</tr>
However, in your case, you won't gain nothing by using ng-if. You will get the same output if you use the following code:
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<tr ng-repeat="record in array">
<td>{{record.id}} {{record.name}}</td>
</tr>
</tr>
If you really want to use a ng-if, the way that you're doing is fine.
I am using nested array in angularjs and bootstrap and that is dynamically coming from server side code.In that displaying table format using rowspan but it is working two level nested array only need to have more level.I tried plunker code.In this example using sample only but I need more levels
<table class="table table-bordered">
<thead>
<tr>
<td>check</td>
<th>Member</th>
<th>Age</th>
<th>Branch</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr ng-repeat="member in group.members">
<td rowspan="{{group.members.length}}" ng-hide="$index>0">
{{group.id}}
</td>
<td >
{{member.name}}
</td>
<td >
{{member.age}}
</td>
<td >
<table >
<tbody>
<tr ng-repeat="stu in member.student" >
<td >{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
FIDDLE
You did not add class="table" for inner table.
Also give padding:0px to td
Fiddle
<td style="padding:0px">
<table class="table">
<tbody>
<tr ng-repeat="stu in member.student" >
<td>{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
var dataList = [{Id:1,Name: "xyz",Select: true},
{Id:2,Name: "PQR",Select : false }];
var headerList = [{"ID","Name","null"}]
i got this value from server side i can not make any changes in this array list.
My html code is
<table class= "table table-bordered">
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td ng-repeat="value in data" ng-if="!$last">
{{value}}
</td>
</tr>
</tbody>
</table>
I don't want to generate "Select" column. code works propely , but when bordered class applies on table one blank column is display i.e "Select"
so that how can i remove this blank column in html DOM ?
You might want to write
<thead>
<tr>
<td ng-if="!$last" ng-repeat="header in headerList">
{{header}}
</td>
</tr>
</thead>
instead of this
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
I have this table.I have details on every row and my idea is when user click on that details to expend another row below that row but problem is that it always expand at the bottom of page.I need to expand below specific row where i click.Any suggestion? This is my html for that table :
<div class="table-layout clean-table">
<table class="table responsive-table">
<thead>
<tr>
<th>#Translator.Translate("STATUS")</th>
<th>#Translator.Translate("ID_TICKET_NUMBER")</th>
<th>#Translator.Translate("TICKET_TIME")</th>
<th>#Translator.Translate("PAYIN_AMOUNT")</th>
<th>#Translator.Translate("PAYOUT_AMOUNT")</th>
<th>#Translator.Translate("TICKET_DETAIL")</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tickets in GetAllTickets">
<th><img ng-src="~/Content/img/Icons/{{tickets.Status | lowercase}}.png" /></th>
<th>{{tickets.Pin}}</th>
<th>{{tickets.TimeCreated | date: 'dd.MM.yyyy - hh:mm:ss'}}</th>
<th>{{tickets.PayIn}}</th>
<th>{{tickets.PayoutAmount}}</th>
<th><button class="details" ng-click="toggleExpandOffer($event);PinTicketSearch(tickets.Pin)"></button></th>
</tr>
<!--extended-->
<tr class="extended-offer-container-row" ng-class=" {'expanded':isExpanded}">
<th colspan="14">
<div ng-slide-down="isExpanded" duration="0.3" lazy-render>
<table class="offer-table-extended">
<tbody>
<tr>
<td>
<table>
<tr>
<td class="popup-text">#Translator.Translate("DATE"):</td>
<td class="white">{{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.Date : TopTicket.TimeCreated }} {{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.Time : '' }}</td>
</tr>
<tr>
<td class="popup-text">
#Translator.Translate("GAME_TYPE"):
</td>
<td class="white">{{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.GameType : TopTicket.GameType }}</td>
</tr>
</table>
</td>
</tr>
<div ng-if="TicketDetail.BettingSlipResult.TicketHolder.BingoBets.length >= 1">
<table class="ticket-table" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="text-center">#Translator.Translate("PICK")</th>
<th class="text-center">#Translator.Translate("ROUND_NUMBER")</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in TicketDetail.BettingSlipResult.TicketHolder.BingoBets">
<td>{{a.Pick}}</td>
<td>{{a.RoundNumber}}</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</tr>
</tbody>
</table>
</div>
You can move ng-repeat to the tbody element instead of the tr element:
<tbody ng-repeat="tickets in GetAllTickets">
There will be multiple tbody elements but this is valid html. Since there will be multiple extended <tr class="extended-offer-container-row" ng-class=" {'expanded':isExpanded}"> instead of the one now, you can update that to reference tickets which is now in it's scope.