We Keep Coding

PrimeNG Table body doesn't display data

I am having trouble trying to fetch data to my overlay.Where did I go wrong ?
My goal is to fetch from an user array ,data (like cId,logged hours) and display it inside my table.
<button
[disabled]="false"
(click)="op1.show($event)"
pButton
type="button"
class="ui-button-primary"
label="View"
></button>
<p-overlayPanel #op1 [showCloseIcon]="true" [dismissable]="false">
<p-table [value]="day" [style]="{ width: '400px' }" [rows]="5">
<ng-template pTemplate="header">
<tr>
<td class="headerItem">{{ wbsElement }}</td>
<td class="headerItem">{{ saturday }}</td>
<td class="headerItem">{{ sunday }}</td>
...
<td class="headerItem">{{ total }}</td>
</tr>
</ng-template>
<ng-template pTemplate="body" let-day>
<tr>
<td>{{ user.cId }}</td>
<td *ngFor="let day of user.days">{{ day.hoursLogged }}</td>
<td>{{ totalHours }}</td>
</tr>
</ng-template>
</p-table>
</p-overlayPanel>
Above I've got my template that is supposed to create my overlay as shown here
wbsElement = Constants.WBS_ELEMENT;
saturday = Day.SATURDAY;
sunday = Day.SUNDAY;
monday = Day.MONDAY;
...
total = Constants.TOTAL;
user: User;
totalHours: number = 0;
constructor(private configService: ConfigService) {}
ngOnInit() {
this.configService.getUsers().subscribe(users => {
this.user = users[0];
});
this.getTotalHours();
}
private getTotalHours() {
this.user.days.forEach(day => (this.totalHours += day.hoursLogged));
}
This is what I have inside my ts file. user accepts dummy data from the first element of users array. Here's a preview of what it receives:
{
name: "test",
cId: "akaskdasda",
email: "test#test.com",
platformUser: "akakaksda",
days: [
{ weekday: Day.MONDAY, hoursLogged: 5 },
{ weekday: Day.TUESDAY, hoursLogged: 8 },
...
{ weekday: Day.SUNDAY, hoursLogged: 5 }
]
},
Currently ,there's no error is displayed inside console that would help me find out the reason of this behaviour and the output is not desired .
As you can see inside the imgur link , the elements go outside of the table (I dont understand this behaviour). I tried removing my double bindings from table body and printing out random data to see if that would work(I've also removed [value]="day" and let-day when I did this) ,however nothing was shown.Last thing I've tried was replacing ng-template with divs (because essentially that's what they are -as far as my understanding goes) but that didnt go well either.

It is correct that PrimeNg requires a [value] in order to create a static table.
However, you can pass in an empty array and do everything else statically as desired. So if inside the <p-table... you add [value]="[[]]", you can set up everything else statically inside the <tr>s and <td>s.
Figure I would post this here in case anyone else has a similar issue before giving up on the p-table altogether.

Managed to solve this by ditching p-table and using a normal table instead. Apparently , as I found here ,p-table expects an array because of [value]="user".

You have to assign user variable to the table value.
Try this.
<p-overlayPanel #op1 [showCloseIcon]="true" [dismissable]="false">
<p-table [value]="user" [style]="{ width: '400px' }" [rows]="5">
<ng-template pTemplate="header">
<tr>
<td class="headerItem">{{ wbsElement }}</td>
<td class="headerItem">{{ saturday }}</td>
<td class="headerItem">{{ sunday }}</td>
...
<td class="headerItem">{{ total }}</td>
</tr>
</ng-template>
<ng-template pTemplate="body" let-user>
<tr>
<td>{{ user.cId }}</td>
<td *ngFor="let day of user.days">{{ day.hoursLogged }}</td>
<td>{{ totalHours }}</td>
</tr>
</ng-template>
</p-table>
</p-overlayPanel>

Get place in table of icon using ng-click

I have a table that's generated using ng-repeat with some columns headers. On the column headers, I want to columns to be sorted. I included a font-awesome sort icon next to their text and when it's clicked, I call an ng-click with ng-click="sortColumn()". I'm calling this for every column header.
How do I know which column header got clicked on? Right now it fires for each header column.
How do pass the current column in using ng-click?
I tried to pass in this, but it returns the $scope object.
Here's what I have so far:
HTML:
<table class="table">
<thead>
<tr>
<td><b>Product </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
<td><b>Code </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
<td><B>Available </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
<td><B>Price </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
</tr>
</thead>
<tbody>
{{ vm.noProducts }}
<tr ng-repeat="product in vm.products">
<td>{{ product.productName}}</td>
<td>{{ product.productCode }}</td>
<td>{{ product.releaseDate | date }}</td>
<td>{{ product.price | currency }}</td>
</tr>
</tbody>
</table>
Javascript:
vm.sortColumn = function (obj) {
console.log(obj);
}

I don't think that you can just pass column as object to sortColumn(). If you need column in that function you can loop trough products and make a new array that will be populated for example with all product names.
Maybe that function could look like this:
function getColumn(val){ // 'productName'
var column = [];
for(var i in $scope.products){
column.push(column.push($scope.products[i][val]))
}
return column
}
If you want to sort table you can use orderBy filter.
To your sortColumn() function pass parameter name and in your ng-repeat use orderBy to order column ascending/descending by one of the parameters.
<table class="table">
<thead>
<tr>
<td ng-click="sortColumn('productName')"><b>Product </b></td>
<td ng-click="sortColumn('productCode')"><b >Code </b></td>
<td ng-click="sortColumn('releaseDate')"><b >Available </b></td>
<td ng-click="sortColumn('price')"><b >Price </b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products | orderBy: criteria">
<td>{{ product.productName}}</td>
<td>{{ product.productCode }}</td>
<td>{{ product.releaseDate | date }}</td>
<td>{{ product.price | currency }}</td>
</tr>
</tbody>
</table>
In your controller set default value for orderBy criteria. (I used here productName)
$scope.criteria = 'productName';
$scope.sortColumn = function(val){
console.log(val)
if($scope.criteria == val){
$scope.criteria = "-"+val;
} else {
$scope.criteria = val;
}
If user clicks on productCode for example, all rows will be sorted by that criteria ascending ('productCode'), if user click on productCode once again all will be sorted descending by criteria '-productCode'
I created small plunker to demonstrate that. Hope it helps.

Searching through JSON Object with ng-class (AngularJS)

I have two JSON objects defined in a controller (NotificationsController). One with all the notifications and another one with only the ID of the newest notifications (last 3 days).
Format of object "notifications": (t_notifications)
[{"0":"1","1":"4","2":"14-APR-16","3":"ALERT 1","ID":"1","ID_USER":"4","DATE":"14-APR-16","NOTIFICATION":"ALERT 1!"},{"0":"2","1":"1","2":"07-APR-16","3":"ALERT 2!","ID":"2","ID_USER":"1","DATE":"07-APR-16","NOTIFICATION":"ALERT 2!"},{"0":"3","1":"1","2":"13-APR-16","3":"ALERT 3!","ID":"3","ID_USER":"1","DATE":"13-APR-16","NOTIFICATION":"ALERT 3!"}]
Format of object "newest notifications": (newest_notifications)
[{"0":"1","ID_NEWNOTIF":"1"},{"0":"3","ID_NEWNOTIF":"3"}]
I'm displaying all the notifications in a view like this:
<div class="panel-body" ng-controller="NotificationsCtrl">
<table datatable="ng" class="row-border hover">
<thead>
<tr>
<th><b>ID</b> </th>
<th><b>ID_USER</b> </th>
<th><b>DATE</b> </th>
<th><b>NOTIFICATION</b> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in t_notifications" ng-class="{selected: data.ID == **TO COMPLETE**>
<td>{{ data.ID }}</td>
<td>{{ data.ID_USER }}</td>
<td>{{ data.DATE }}</td>
<td>{{ data.NOTIFICATION }}</td>
</tr>
</tbody>
</table>
</div>
I would like to know how it is possible to select in my table only the newest notifications - searching through the JSON object newest_notifications - with ng-class?
PS: "selected" is already defined with a blue background color.

Just use a strict filter
... ng-class="{'selected': (newest_notifications | filter : { ID_NEWNOTIF: data.ID } : true).length !== 0 }"
Fiddle - https://jsfiddle.net/dyxf5xqj/

You can use a expression against data.DATE. For example
<tr ng-repeat="data in t_notifications" ng-class="{selected: data.DATE > someDateInThePast}">

Angular Dir-Pagination and calling controller function

I have an angular html snippet below of a table I am trying to wire up using Dir-Paginate and also have the table row change class based on a function on the controller.js
<tr dir-pagination="response in vm.responses | toArray | orderBy:'-completionTime' | itemsPerPage: $root.pagination.itemsPerPage" class="{{ vm.getRowClass($index) }}">
<td> {{ $index + 1 }}</td>
<td><a ui-sref="response({uri:response.uri})">{{ response.name }}</a></td>
<td>{{ response.email }}</td>
<tr>
<dir-pagination-controls ng-show="appvm.showDataTable()" boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="ng/pagination"></dir-pagination-controls>
If i remove all of the Dir-Pagination syntax and make it just a normal ng-repeat the vm.getRowClass($index) works as it should, changing the class based on the function's logic. However, when I try to add the dir-pagination syntax in, i am given a $Index is undefined error.
Problem seems to be that Dir-Paginate does not allow me to pass in an $index or any item on the same line as the <tr>

After the comment and some playing around i found the solution.
I needed to add track by $index to the end of the itemsPerPage: $root.pagination.itemsPerPage area.
Shown correctly below.
<tr dir-pagination="response in vm.responses | toArray | orderBy:'-completionTime' | itemsPerPage: $root.pagination.itemsPerPage track by $index" class="{{ vm.getRowClass($index) }}">
<td> {{ $index + 1 }}</td>
<td><a ui-sref="response({uri:response.uri})">{{ response.name }}</a></td>
<td>{{ response.email }}</td>
<tr>

want to show a link only for a user who is logged in for all else it show either be hidden or disabled in angularjs and nodejs

I have a form
and i want that in "mark your attendence here "link should be visible only to the user which is logged in (/or disabled for the not logged in users .).please tell me how to do this :
here is my code
<tr ng-repeat="person in user.users">
<td>{{ person._id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.username }}</td>
<td>{{ person.joiningDate }}</td>
<td ng-show="user.loggedIn"><a href="/users/{{ person._id }}/attendence" >Mark your attendence here</a></td>
<td class="col-sm-2">
<a ng-href="/users/{{ person._id }}" class="btn btn-danger">Edit</a>
Delete
</td>
</tr>
if i use user.loggedIn service then because of a particular user logged in it show the attendence column

Create a function in controller. Call the authservice from that function and on authentication success , set a Boolean to true. Give that boolean in ngShow.