I have this table:
<table class="table tenant-table text-center">
<thead>
<tr>
<th class="text-center">
<i class="fa fa-per"></i> Date
</th>
<th class="text-center">
<i class="fa fa-calendar"></i> Result
</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(k, v) in loanapps track by $index">
<td data-th="Date">{{v.ApplicationDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td data-th="Result">
<a ng-if="v.LoanStatus == 'Approved'" ui-sref="approved({loanid: {{v.ApplicationId}}})" class="btn dark btn-sm btn-outline sbold uppercase">
<i class="fa fa-share"></i> View
</a>
</td>
</tr>
</tbody>
</table>
I'm trying to include a parameter, the application id for the approved redirect but I'm not able to include that value in the url. Is the ui-sref approach I'm taking correct or I need to do some tweak?
Just had the same issue. Hopefully I figure out a better way to do it, but for now this will work:
approved({loanid: '{{v.ApplicationId}}'})
Related
I'm using Spring MVC and AngularJS in my application and in a particular table I have to display inside the same <td> multiple values from an array but I don´t know how. Anyway this will explain it better:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Acciones</th>
<th>Referencia</th>
<th>Tipo de Publicación</th>
<th>Categoría</th>
<th>Fecha de adición</th>
<th>Fecha de modificación</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="referencia in allReferencias track by $index">
<td>
<button class="btn btn-primary" data-ng-click="abrirEditarModal($index)" data-toggle="modal" data-target="#informe">
<i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn btn-danger" data-toggle="modal" data-target="#formModalEliminar" data-ng-click="abrirEliminarModal($index)">
<i class="glyphicon glyphicon-trash"></i></button>
</td>
<td>{{referencia.autoresList}},({{referencia.fecha}}). {{referencia.title}}, {{referencia.location}}, {{referencia.arcPublication}},
{{referencia.volumen}}({{referencia.numVol}}),{{referencia.pages}}</td>
<td>{{referencia.idFuente.nombreFuente}}</td>
<td>{{referencia.idGrupo.grupo}}</td>
<td>{{referencia.fechaAd| date: 'dd-MM-yyyy'}}</td>
<td>{{referencia.fechaMod| date: 'dd-MM-yyyy'}}</td>
</tr>
</tbody>
</table>
What I get from the server is
and inside every record there is other array:
And I all I need to display from autoresList is the nombres and apellidos attributes. So that is my question how can I display those two attributes in the same <td>?
Just replace your <td> code by this
<td>
<span data-ng-repeat="autoRes in referencia.autoresList">
{{autoRes.nombre}},{{autoRes.apellidos}}
</span>,
({{referencia.fecha}}). {{referencia.title}},
{{referencia.location}},
{{referencia.arcPublication}},
{{referencia.volumen}}({{referencia.numVol}}),{{referencia.pages}}
</td>
Inside an ng-repeat I have a table in which I display information using Bootstap collapse, however I need the id to be changed with the loop in order for the data to be displayed in the right place, with my current code it keeps displaying in the same row with each click, here is my code :
<tr ng-repeat=" p in projetsListe ">
<td>{{p.NomProjet}}</td>
<td>{{calcul(p.IdProjet)}}</td>
<td>{{calculTotal(p.IdProjet)}}</td>
<td>{{calcul(p.IdProjet)-calculTotal(p.IdProjet)}}</td>
<td>
<a href="#" ng-click="myFunction(p.IdProjet)" data-toggle="collapse" data-target="#d">
<i class="fa fa-eye"></i>
<span>Voir les détails</span> <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="d" class="collapse">
<table id= "mytable" class="table table-hover" style="display : none;">
<thead>
<tr>
<th>Tache</th>
<th><center>Charge estimée</center></th>
<tr ng-repeat="t in tempnorep">
<td>{{t.NomTache}}</td>
<td><center>{{t.TempsPrevu}} jours<center></td>
</tr>
</table>
</ul>
</td>
</tr>
I believe you wanted to do something like:
<tr ng-repeat=" p in projetsListe ">
<td>{{p.NomProjet}}</td>
<td>{{calcul(p.IdProjet)}}</td>
<td>{{calculTotal(p.IdProjet)}}</td>
<td>{{calcul(p.IdProjet)-calculTotal(p.IdProjet)}}</td>
<td>
<a href="#" ng-click="myFunction(p.IdProjet)" data-toggle="collapse" ng-attr-data-target="#{{p.IdProjet}}">
<i class="fa fa-eye"></i>
<span>Voir les détails</span> <i class="fa fa-fw fa-caret-down"></i></a>
<ul ng-attr-id="{{p.IdProjet}}" class="collapse">
<table id= "mytable" class="table table-hover" style="display : none;">
<thead>
<tr>
<th>Tache</th>
<th><center>Charge estimée</center></th>
<tr ng-repeat="t in tempnorep">
<td>{{t.NomTache}}</td>
<td><center>{{t.TempsPrevu}} jours<center></td>
</tr>
</table>
</ul>
</td>
</tr>
I have a table, in which i would like to only show rows that match some variables, as well as hide/show all rows.
So, with additional variables to add later, how would i implement a hide/show all functionallity preferably with keeping the <"a> tags
<span class="glyphicon glyphicon-triangle-bottom"></span> Expand all
<span class="glyphicon glyphicon-triangle-right"></span> Hide all
<table style="width: 50%" class="table table-striped table-bordered table-hover">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-3">
<col class="col-xs-3">
<col class="col-xs-1">
</colgroup>
<thead>
<th>ID</th>
<th> name</th>
<th> name</th>
<th>Action</th>
</thead>
<tbody>
<tr class="{{ a.b ? 'danger' : 'success' }}" ng:repeat:start="entity in entities">
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>{{a.asd.name}}</td>
<td>
<a class="glyphicon glyphicon-pencil" href="#project/{{project.id}}"></a>
<a class="glyphicon glyphicon-triangle-bottom" href="" class="rowtrigger" data-toggle="collapse" data-target="#detail_{{project.id}}"></div>
</td>
</tr>
<tr ng:repeat:end>
<td colspan="4" class="collapse-row">
<div id="detail_{{a.id}}" class="collapse statuslabel">
<span ng:repeat="version in a.versions" class="label label-{{ version.b ? 'danger' : 'success' }}">
{{version.version}}
</span>
</div>
</td>
</tr>
</tbody>
</table>
You could put a click event on the Hide/Show all and have that set a boolean property in the controller. Then bind that boolean property to the ngHide attribute on the rows. You could do something like ng-hide="hideAll || <whatever other conditions you want>"
Below is the html I have used to show data in the table, its working fine.
Now I want to convert it to jQuery Datatables.
HTML:-
<table cellpadding="3" class="table table-bordered">
<thead>
<tr class="success">
<th style="cursor: pointer;" ng-click="sort('DOB')"><b>DOB</b> <span class="glyphicon sort-icon" ng-show="sortKey=='DOB'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th style="cursor: pointer;" ng-click="sort('StateName')"><b>State</b> <span class="glyphicon sort-icon" ng-show="sortKey=='StateName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th style="cursor: pointer;" ng-click="sort('FileId')"><b>Image</b> <span class="glyphicon sort-icon" ng-show="sortKey=='FileId'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th><b>Actions</b></th>
</tr>
</thead>
<tbody>
<tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:5" ng-model="search">
<td>{{employee.DOB | date:'MM/dd/yyyy' }}
<td>{{employee.StateName}}
</td>
<td>
<img ng-src="UploadedFiles/{{employee.FilePath}}" class="img-circle" style="max-width: 50px" alt='Employee Image Missing' />
</td>
</tr>
</tbody>
</table>
I am creating dynamic headers of a table like this:
<thead>
<tr>
<th width="5%" class="shrink">
<input type="checkbox" id="selectedAll" ng-model="selectedAll" ng-click="selectAll()" />
</th>
<th class="header" data-href="" rel="tooltip" title="" ng-repeat="header in tableHeaders" width="header.width">
<a style="cursor: pointer;" ng-click="Search(1,header.colName,
sorting.reverseSort=!sorting.reverseSort)">
{{header.name}}
<span ng-show="orderBy == header.colName">
<i ng-class="sorting.reverseSort ? 'fa fa-sort-asc' : 'fa fa-sort-desc'"></i>
</span>
</a>
</th>
<th width="10%" class="last shrink"></th>
</tr>
</thead>
But “header.width” is not applying as it is in a same element as ng-repeat.
So what is work around for this?
Please guide me.
Thank you.
Use curly braces:
<th class="header" data-href="" rel="tooltip" title="" ng-repeat="header in tableHeaders" width="{{header.width}}">
Try this
<th title="" ng-repeat="header in tableHeaders" ng-style="{'width': header.width}">