Here Is my code.
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<div id="exportable">
<table class="table table-striped table-bordered table-hover dataTable" id="example">
<thead>
<tr>
<th style="background-color: #f5f5f5;">Device Number</th>
<th style="background-color: #f5f5f5;">Name</th>
<th style="background-color: #f5f5f5;">MobileNumber</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in SubscriptionList">
<td>
<button ng-if="obj.expanded" ng-click="obj.expanded = false">-</button>
<button ng-if="!obj.expanded" ng-click="obj.expanded = true">+</button>
</td>
<td>{{ obj.DEVICENUMBER}}</td>
<td>{{ obj.NAME}}</td>
<td>{{ obj.MOBILENUMBER}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.table-responsive -->
</div>
</div>
<!-- /.row -->
Result Is Coming like
Name Mobile Device
A 112 Nokia
A 112 Samsung
B 111 Videocon
B 111 LG
I want There is an expand button on Name,when I expand below all the details will show
You could use ng-repeat-start and ng-repeat-end and add an additional tr to your table with an ng-if. That way when you click on the button there will be an extra row just under the one which holds the button.
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<div id="exportable">
<table class="table table-striped table-bordered table-hover dataTable" id="example">
<thead>
<tr>
<th style="background-color: #f5f5f5;">Device Number</th>
<th style="background-color: #f5f5f5;">Name</th>
<th style="background-color: #f5f5f5;">MobileNumber</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="obj in SubscriptionList">
<td>
<button ng-if="obj.expanded" ng-click="obj.expanded = false">-</button>
<button ng-if="!obj.expanded" ng-click="obj.expanded = true">+</button>
</td>
<td>{{ obj.DEVICENUMBER }}</td>
<td>{{ obj.NAME }}</td>
<td>{{ obj.MOBILENUMBER }}</td>
</tr>
<tr ng-repeat-end ng-if="obj.expanded">
<td colspan="4">expanded</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Related
I am trying to sort columns by clicking on the header item using smart table. But it does not work for me. What am I doing wrong?
This is my HTML:
<div class="pane pane--table1" st-table="data.content" st-safe-src="data">
<div class="pane-hScroll">
<table>
<thead>
<tr>
<th ng-repeat="item in data.header" st-sort="{{item}}">{{item}}</th>
</tr>
</thead>
</table>
<div class="pane-vScroll">
<table>
<tbody>
<div ng-include="'templates/includes/ajax_spinner.html'"></div>
<tr ng-repeat="value in data.content">
<td ng-repeat="(key, val) in value[0]">{{val}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to do a table with ng-repeat. This is my code
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" class="{{n.fondo}}">
<td style="width: 32%;"><div class="bordeTab">
<div class="{{n.color}}First" >
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF" ng-if="n.nombre == dato.nombre">
<div class="{{n.color}}" >
{{dato.valor}}
</div><br>
</td>
</tr>
</tbody>
</table>
Once it enter to this ng-repeat="dato in datosCF", I do and if to print a value, but if the if returns me false I need to print this "-".
It sounds like you want to include all rows, but the content of the row is different based on some condition. If that's the case, you can try moving the conditional logic into the body of your <td> element, and having two divs with contradictory ng-if expressions:
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" ng-class="n.fondo">
<td style="width: 32%;"><div class="bordeTab">
<div ng-class="n.color + 'First'">
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF">
<div ng-if="n.nombre === dato.nombre" ng-class="n.color">
{{dato.valor}}
</div>
<div ng-if="n.nombre !== dato.nombre">
-
</div><br>
</td>
</tr>
</tbody>
</table>
I also changed your interpolated class attributes to ng-class.
I am using ng-repeat from AngularJS in a table.
When I click on a row, there is data that appears just below this row.
The problem is that when I click on another row while one is already expanded, both are expanded.
I would like to close the first one and expand the second one.
HTML
<div id="accordion">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-10">Name</th>
<th class="col-md-1">Collateral</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="pack in packages | filter:search" id="row">
<td data-toggle="collapse" data-target="#collapse{{$index}}" data-parent="#accordion" ng-click="expand(pack)">{{pack.name}}</td>
<td><button class="btn btn-info"><span class="glyphicon glyphicon-open-file"></span></button></td>
<td><input type="radio" ng-model="$parent.selectedPackage" ng-value="pack" /></td>
</tr>
<tr ng-repeat-end>
<td colspan="3">
<div class="collapse" id="collapse{{$index}}">
<table class="table">
<tbody>
<tr>
<td>{{indication}}</td>
</tr>
<tr ng-repeat="bb in bananas">
<td>{{bb.name}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
first you don't need of unique id for it... Just try with https://github.com/angular-ui/bootstrap/tree/master/src/collapse or in your case maybe: https://github.com/angular-ui/bootstrap/tree/master/src/accordion
Good Luck.
I'm loading a large amount of data using ng-include.
I'd like to know if there is a way to know when a template is "rendered", because sometimes it seems like it's been "frozen", because I want to do a "loading screen" or something.
Thx.
Here's the code
controller code:
$scope.layout = {
current: 'single-table.html'
};
$scope.layout.get = function() {
return $scope.layout.current;
};
templates:
main.html
<div class="btn-group">
<button ng-click="layout.current = 'single-table.html'">Single</button>
<button ng-click="layout.current = 'multiple-table.html'">Multiple</button>
</div>
<div ng-include="layout.get()"></div>
single-table.html
<table class="table table-bordered">
<thead>
<th ng-repeat="column in columns">{{ column.title }}</th>
</thead>
<tbody>
<tr ng-repeat="record in records">
<td ng-repeat="field in record.fields"
ng-controller="FieldController"
ng-class="getClass()">
{{ field.display }}
</td>
</tr>
</tbody>
</table>
multiple-table.html
<table class="table table-bordered" ng-repeat="record in records">
<tbody>
<tr ng-repeat="field in record.fields">
<th>{{ columns[$index].title }}</th>
<td ng-controller="FieldController" ng-class="getClass()">
{{ field.display }}
</td>
</tr>
</tbody>
</table>
EDIT
I'm using version 1.2.0
One solution (probably not the best) is doing this (no ng-include)
<table class="table table-bordered" ng-show="layout.current == 'single-table.html'">
<thead>
<th ng-repeat="column in columns">{{ column.title }}</th>
</thead>
<tbody>
<tr ng-repeat="record in records">
<td ng-repeat="field in record.fields"
ng-controller="FieldController"
ng-class="getClass()">
<span lud-run="{{ field.ng_directive }}"></span>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered" ng-repeat="record in records" ng-show="layout.current == 'multiple-table.html'">
<tbody>
<tr ng-repeat="field in record.fields">
<th>{{ columns[$index].title }}</th>
<td ng-controller="FieldController" ng-class="getClass()">
<span lud-run="{{ field.ng_directive }}"></span>
</td>
</tr>
</tbody>
</table>
I have only 20 records, but (is not in the code), each cells loads a custom directive depends on the data type (string, date, datetime, image...). This "solution" I think runs the same data twice (ng-show, not ng-if), but when a switch the layout mode there is no "lag".
You can use the onload hook on ng-include to update a variable when the include has finished rendering. If you set it to true on clicking your button, then revert it back to false in onload, you should be able to leverage it to temporarily display a loading screen.
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>