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>
Related
I have array with object's and I need to output this array in 2 column's. I tried to use filter, ng-switch-when. But always array output's in 1 col. There is my array:
Here is my last try outputting with ng-switch-when:
<div ng-repeat="date in allDates">
<div ng-switch="date.invited_date">
<table>
<thead>
</thead>
<tbody>
<tr>
<td ng-switch-when="1">{{date.project_name}}</td>
<td ng-switch-when="0">{{date.project_name}}</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
</div>
Actual result is:
But i need to separate them by invited_date in 2 column's how can I do it?
I can do it in 2 tables, but then if project name will be long it will ruin structure
You cant show in two rows with single iteration , try as two iteration
<div ng-repeat="date in allDates">
<div ng-switch="date.invited_date">
<table>
<thead>
</thead>
<tbody>
<tr>
<td ng-switch-when="1">{{date.project_name}}</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
</div>
<div ng-repeat="date in allDates">
<div ng-switch="date.invited_date">
<table>
<thead>
</thead>
<tbody>
<tr>
<td ng-switch-when="0">{{date.project_name}}</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
</div>
I want to fetch the data inside table but not getting any data.
Code is here--
<div ng-controller="tenders">
<table ng-init="getViewProjectDetail('<?php echo $project_id ; ?>')">
<thead>
<tr class="active">
<th colspan="4">
Project Detail:
</th>
</tr>
</thead>
<tbody>
<tr>
<th><b>Project Name :</b></th>
<td ng-repeat="a in viewProjects">
{{a.id}}
</td>
{{viewProjects | json}}
</tr>
</tbody>
</table>
</div>
getting all data in viewProjects through json but unable to print it inside table row n each function of controller services and models working perfactly except this.
Please help me to get this issue.
You can use <ng-container ng-repeat=""></ng-container> for any angularJS condition without use any html element as below :
<table>
<tr>
<td>xyz</td>
<ng-container ng-repeat="a in myArray">
<td>{{a.id}}</td>
</ng-container>
</tr>
</table>
It looks like you should loop over tr instead of td in this case
<div ng-controller="tenders">
<table ng-init="getViewProjectDetail('<?php echo $project_id ; ?>')">
<thead>
<tr class="active">
<th colspan="4">
Project Detail:
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in viewProjects">
<td><b>Project Name :</b></td>
<td >
{{a.id}}
</td>
</tr>
</tbody>
</table>
</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 trying to visualize an json-object in a table like this :
<div ng-repeat="item in data">
<tr ng-repeat="i in item">
<td>{{i.id}}</td>
<td>{{i.ip}}</td>
</tr>
</div>
If I do that I will see only a white screen.
This way works, but I need the data in an table.
<div ng-repeat="item in data">
<ul ng-repeat="i in item">
<div>
{{ i.id }}
{{ i.ip }}
</div>
</ul>
</div>
Do you know a possible solution with a table?
try this
<table>
<tbody ng-repeat="item in data">
<tr ng-repeat="i in item">
<td>{{i.id}}</td>
<td>{{i.ip}}</td>
</tr>
</tbody>
</table>
I found the mistake! The first ng-repeat must be in the table statement.
<table class="table table-striped">
<thead>
<tr>
<td>id</td>
<td >ip</td>
</tr>
</thead>
<tbody ng-repeat="item in data">
<tr ng-repeat="i in item">
<td>{{i.id}}</td>
<td>{{i.ip}}</td>
</tr>
</tbody>
</table>
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.