How can I sort a table given dynamic headers with angular? All of the examples I can find use static headers. My first issue is that ng-click isn't updating orderByField.
My best shot below: HTML:
<table class="table table-condesnsed table-bordered">
<thead>
<tr>
<th ng-repeat="header in report_headers"
ng-click="orderByField[header]; reverseSort = !reverseSort">
{{ header }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="quote in paginated_quotes">
<td ng-repeat="elem in quote |orderBy:orderByField:reverseSort">
<span ng-if="!isNumber(elem.value)">
{{ elem.value | limitTo:8 }}... {{ elem.unit }}</span>
<span ng-if="isNumber(elem.value)">
{{ elem.value | number:0 }} {{ elem.unit }}</span>
</td>
</tr>
</tbody>
</table>
JS:
$scope.orderByField = 'UUID';
$scope.reverseSort = false;
Thanks
I think you want
<th ng-repeat="header in report_headers"
ng-click="orderByField = header; reverseSort = !reverseSort">
other than that it looks like it should work
Related
<div id="collapseThree-2" class="panel-collapse collapsexpanded="false">
<table class="table table-hover hd-bg table-bordered;sortable">
<thead align="center">
<tr>
<th>Request ID</th>
<th>Request Type</th>
<th>Initiator</th>
<th>Product</th>
<th>Version</th>
<th>Submission Date</th>
<th>Stage</th>
<tr>
<tbody ng-repeat = "x in requestData">
<td ng-bind = "x.id"></td>
<td ng-bind = "x.type_of_request"></td>
<td ng-bind = "x.initiator_name"></td>
<td ng-bind = "x.product_name"></td>
<td ng-bind = "x.product_version"></td>
<td ng-bind = "x.submission_date"></td>
<td ng-bind = "x.status_flag"></td>
</tbody>
</thead>
</table>
</div>
Here, i am using sottable.js, but still not able to find the sorting options on columns.As, i am using sorttable.js, so by default it needs to come up with sorting options on the columns of the table.
You need to bind array of object like this
$scope.sortColumn = {
Column: 'c1', // name of column
reverse: false // order
};
html Code:-
<th ng-repeat="object in objects">
<a ng-click="columnSort.sortColumn=objects[$index];columnSort.reverse=!columnSort.reverse">{{ objects[$index] }}</a>
</th>
please find fiddle
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 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 >:(
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.