I wanted to know how to display the data by reading a local json. In a row having 4 columns, 2 columns are coming from 1 array and 2 are coming from a different array.
HTML:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>IT</th>
<th>IT User</th>
<th>CT</th>
<th>CT User</th>
</tr>
</thead>
<tbody>
<tr>
<td class="currency">Type A</td>
<td class="currency"></td>
<td class="currency"></td>
<td class="currency"></td>
<td class="currency"></td>
</tr>
<tr>
<td class="currency">Type B</td>
<td class="currency"></td>
<td class="currency"></td>
<td class="currency"></td>
<td class="currency"></td>
</tr>
</tbody>
JSON:
{
"intr_liab":[
{
"ty":"typeA",
"it":"100",
"ct":"200"
},
{
"ty":"typeAITUser",
"it":"300",
"ct":"400"
},
{
"ty":"typeB",
"it":"500",
"ct":"600"
},
{
"ty":"typeBITUser",
"it":"700",
"ct":"800"
}
]
}
So data in the table should come as:
<body ng-controller="MainCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>IT</th>
<th>IT User</th>
<th>CT</th>
<th>CT User</th>
</tr>
</thead>
<tbody>
<tr>
<td class="currency">Type A</td>
<td class="currency">100</td>
<td class="currency">300</td>
<td class="currency">200</td>
<td class="currency">400</td>
</tr>
<tr>
<td class="currency">Type B</td>
<td class="currency">500</td>
<td class="currency">700</td>
<td class="currency">600</td>
<td class="currency">800</td>
</tr>
</tbody>
</table>
</body>
Please refer this Plunker for more clarity:
https://plnkr.co/edit/USt7nXmwCTRcCfOx8sma
Please replace the HTML code with following. I hope it will help you.
<body ng-controller="MainCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>IT</th>
<th>IT User</th>
<th>CT</th>
<th>CT User</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in intLiab">
<td class="currency">{{item.ty}}</td>
<td class="currency">{{item.it}}</td>
<td class="currency"></td>
<td class="currency">{{item.ct}}</td>
<td class="currency"></td>
</tr>
</tbody>
</table>
</body>
Please comment if you need more specific answer.
Related
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>
I have a table where I use ng-repeat and angular-ui collapse to show data on it. I would like to implement ui-grid, but I'm not even near a solution.
Here's a Plunker of my code: https://plnkr.co/edit/mKeRaDv22WzBXjRT67oO?p=preview
The html code:
<div ng-controller="MyCtrl">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 20%">A: </th>
<th style="width: 20%">B: </th>
<th style="width: 15%">C: </th>
<th style="width: 15%">D: </th>
<th style="width: 15%">E: </th>
<th style="width: 15%">F: </th>
</tr>
</thead>
<tbody ng-repeat="data in myData" ng-click="element.isCollapsed = !element.isCollapsed">
<tr>
<td>{{data.a}}</td>
<td>{{data.b}}</td>
<td>{{data.c}}</td>
<td>{{data.d}}</td>
<td>{{data.e}}</td>
<td>{{data.f}}</td>
<td></td>
</tr>
<tr collapse="element.isCollapsed" ng-show="element.isCollapsed">
<td colspan="2">{{data.g}} </td>
<td colspan="2">{{data.h}} </td>
<td colspan="2">{{data.i}} </td>
</tr>
<tr collapse="element.isCollapsed" ng-show="element.isCollapsed">
<td colspan="2">{{data.j}} </td>
<td colspan="2">{{data.k}} </td>
<td colspan="2">{{data.l}} </td>
</tr>
<tr collapse="element.isCollapsed" ng-show="element.isCollapsed">
<td colspan="6">{{data.m}} </td>
</tr>
</tbody>
</table>
</div>
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.
I have a list of users for each of my stores [model.stores.users] in JSON object and currently show the number of users against each store by accessing store.users.length
Now I want two extra counts, these counts are just based on the number of users with a simple boolean filter.
Count of Active Users is where user.is_user_active = true
Count of Pending Users is where user.is_user_active = false
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="hidden">ID</th>
<th>Name</th>
<th>Users</th>
</tr>
</thead>
<tbody class="tbl-jobs-data" ng-repeat="item in model.stores">
<tr data-toggle="collapse" class="accordion-toggle" data-target="#store_user{{$index}}">
<td class="hidden">{{item.id}}</td>
<td class="">{{item.name}}</td>
<td class="user-count">{{item.users.length}}</td>
</tr>
<tr ng-if="item.users.length > 0">
<td colspan="100" class="hiddenRow">
<div class="accordian-body collapse" id="store_user{{$index}}">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>State</th>
<th>Is Active</th>
<th>Last Login</th>
</tr>
</thead>
<tbody class="tbl-search-data">
<tr ng-repeat="app in item.users">
<td>{{app.id}}</td>
<td>{{app.name}}</td>
<td>{{app.state}}</td>
<td>{{app.is_user_active}}</td>
<td>{{app.last_login}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Just use filter, eg
<td class="active_user_count">
{{ (item.users | filter : { is_user_active: true }).length }}
</td>
<td class="pending_user_count">
{{ (item.users | filter : { is_user_active: false }).length }}
</td>
I hope I've got the syntax right, the Angular docs are down at the moment >:(
The following image is produced by the following code:
<div class="row" ng-show="result">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th>Group</th>
<th>Status</th>
<th>Result</th>
<th>Computations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in result | orderBy:'-WarnResult.Value' | filter: { Status: 'warning'}">
<td>
{
<span ng-repeat="(k, v) in r.WarnResult.Group">
{{k}}={{v}}<span ng-hide="$last">,</span>
</span>
}
</td>
<td ng-bind="r.Status"></td>
<td>
<pre ng-bind="json(r.WarnResult.Value)"></pre>
</td>
<td>
<table class="table table-striped table-condensed">
<tbody>
<tr ng-repeat="c in r.WarnResult.Computations">
<td ng-bind="c.Text"></td>
<td ng-bind="c.Value"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr ng-repeat="r in result | orderBy:'-CritResult.Value' | filter: { Status: 'normal'}">
<td>
{
<span ng-repeat="(k, v) in r.CritResult.Group">
{{k}}={{v}}<span ng-hide="$last">,</span>
</span>
}
</td>
<td ng-bind="r.Status"></td>
<td>
<pre ng-bind="json(r.CritResult.Value)"></pre>
<pre ng-bind="json(r.WarnResult.Value)"></pre>
</td>
<td>
<table class="table table-striped table-condensed">
<tbody>
<tr ng-repeat="c in r.CritResult.Computations">
<td ng-bind="c.Text"></td>
<td ng-bind="c.Value"></td>
</tr>
</tbody>
</table>
<table class="table table-striped table-condensed">
<tbody>
<tr ng-repeat="c in r.WarnResult.Computations">
<td ng-bind="c.Text"></td>
<td ng-bind="c.Value"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I'd like to make it so the the results (The thing in the Pre boxes) lines up with their corresponding computations (The idea is both the WarnResult and CritResult are show when Status is 'normal'). It looks like maybe I want to use rowspan, or maybe something with ng-repeat-start and ng-repeat-stop, but I'm having trouble seeing the solution.
Decided to move the repeat to the tbody, which allows me to have two rows per iteration.
<table class="table">
<thead>
<tr>
<th>Group</th>
<th>Status</th>
<th>Expression</th>
<th>Result</th>
<th>Computations</th>
</tr>
</thead>
<tbody ng-repeat="r in result | orderBy:'-status_number'">
<tr>
<td rowspan="2">
{
<span ng-repeat="(k, v) in r.CritResult.Group">
{{k}}={{v}}<span ng-hide="$last">,</span>
</span>
}
</td>
<td rowspan="2" ng-bind="r.Status"></td>
<td>critical</td>
<td>
<pre ng-bind="json(r.CritResult.Value)"></pre>
</td>
<td>
<table class="table table-striped table-condensed">
<tbody>
<tr ng-repeat="c in r.CritResult.Computations">
<td ng-bind="c.Text"></td>
<td ng-bind="c.Value"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<td>warning</td>
<td>
<pre ng-bind="json(r.WarnResult.Value)"></pre>
</td>
<td>
<table class="table table-striped table-condensed">
<tbody>
<tr ng-repeat="c in r.WarnResult.Computations">
<td ng-bind="c.Text"></td>
<td ng-bind="c.Value"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>