I try to implement a datatable with dynamic column sortable and paginator.
My problem is that sorting doesn't work:
My code:
<p-dataTable [value]="enregistrements" [row]="10" [paginator]="true"
[pageLinks]="3" [rowPerPageOptions]="5,10(20]" scrollable="true" scrollWidth="1200px">
<ng-container *ngFor="let champ of champs; let i = index">
<p-column header="{{champ}}" [sortable]="true" field="{{champ}}">
<ng-template let-enregistrement="rowData" pTemplate type="body">{{enregistrement.champs[i].value}}</ng-template>
<p-column>
</ng-container>
</p-dataTable>
Ideas on what the problem might be?
My code compile and the display is right but when i click on header column to sort it, nothing happens.
Related
I am using PrimeNg to edit data table.
How to set Auto width column or bring down the text next line for below sample.
You can reproduce same behavior in below primeNg link.
https://primefaces.org/primeng/showcase/#/table/edit
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="product.name" required>
</ng-template>
<ng-template pTemplate="output">
{{product.name}}
</ng-template>
</p-cellEditor>
</td>
To bring down the text next line, you have to add in the css, the next line:
td {
word-break: break-word;
}
To see more options about word-break, I write the next link from PrimeNG
This is actually a bug in v11.x which you're using (as we can see from the attached screenshot).
This bug is fixed in v12.x, so you can update your project to use primeng v12.x or higher.
Using primeng table to display the data as grid.
Using below code to display testdate with date format.I would like to display the format part(YYYY-MM-dd) in second line of column.Please suggest
<p-column field="testdate" header="Test Date (YYYY-MM-dd)" [sortable]="true"
[style]="{'width':'150px'}"></p-column>
Use ng-template for that :
<p-column field="testdate" header="Test Date (YYYY-MM-dd)" [sortable]="true"
[style]="{'width':'150px'}" let-testdate="rowData.testdate">
<ng-template pTemplate="body">
{{testate | date: 'YYYY-MM-dd'}}
</ng-template>
</p-column>
I am new to Angular and have been trying to make a dynamic table.
The user enters the no of columns he wants and then he can add as many rows to each column as he wants.
I have provided an "add" button at the end of each column to add new row to that particular column.
My code looks somewhat like this:
<table>
<tr>
<th ng-repeat="x in setno"> SET {{x.number}}</th>
</tr>
<tr ng-repeat="z in selected">
<td> </td>
</tr>
<tr>
<td ng-repeat="x in setno">
<button ng-click="selected.push({})"> add </button>
</td>
</tr>
</table>
where, setno is list containing numbers:
$scope.setno[{id:"a", number:"1"},{id:"b", number:"2"},...];
and selected has a similar structure.
The problem is that when I click "add" button of any column, a new row gets add to all the columns.
Whereas I want, a new row to be added to only the one whose "add" button has been clicked.
How can I know whose "add" button has been clicked?
How can i know whose "add" button has been clicked?
You need access to the current $index of the target repeater. Now I'm not sure which it is you're trying to target but you can store an ng-repeater's $index as another variable for access from inner repeaters using the following syntax:
<!-- outer loop -->
<div ng-repeat="(idxA, item) in items)">
<!-- inner loop -->
<div ng-repeat"(idxB, obj) in item.objs">
<ul>
<!-- another inner loop -->
<li ng-repeat="li in obj.pts">
In the above code idxA will be the same as the outer loop's $index, idxB is the inner loop's $index and so on. Then you just pass the index (e.g. idxA or idxB) to your method.
resources:
https://stackoverflow.com/a/18914958/1121919
https://docs.angularjs.org/api/ng/directive/ngRepeat
I ma very beginner in Angularjs and pardon my silly mistakes. I have a table which shows data in three columns and i want to filter this table based on a condition and hide unnecessary data in one column which contains integers. I have used ng-show with some condition linked to ng-model and this is working perfect if i enter data in my ng-model only after loading total form. But, i want to show all the table data in the beginning and then hide unnecessary data based on ng-show condition.
How can i do this? I am struggling!
<tr ng-show= "change > val1 " ng-repeat="change in montlyProjection();" >
<td>some data</td>
<td class="number">some data</td>
<td class="number" ng-class="positiveNegative(convertToNumber(startBalance) + change)">some data</td>
</tr>
</strong><input type="text" ng-model="val1" placeholder="Enter Amount" />
<tr ng-show="((change > val1) || !val1)" ng-repeat="change in monthlyProjection()">
Try adding additional conditions to the ng-show directive. If !val doesn't work try using "angular.equals(val1,'')" or "angular.isDefined(val1)"
I'm attempting to use ng-repeat in a couple of elements on my page.
For some reason it's showing each of the n elements n times and I cannot figure out why.
My array looks something like this:
$scope.fieldNames = ["Last_Name","First_Name","Email","Home_Phone","Cell_Phone"];
I have a select box that is filling n^2 times (I have tried using ng-options but cannot get it to work with the array):
<td>
<select ng-model="currentField" style="width: 100%">
<option ng-repeat="field in fieldNames">{{field}}</option>
</select>
<td>
Additionally this happens with the header row of my table.
But not with the member rows or the cells contained within.
<table class = "main-table">
<thead>
<tr>
<th ng-repeat = "field in fieldNames">{{field}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "member in members" >
<td ng-repeat = "field in fieldNames">{{member[field]}}</td>
</tr>
</tbody>
</table>
If someone could please explain to me why this is happening and how to fix it I would be grateful. A working example of the ng-options would also be appreciated.
Thanks in advance for your time.
To work with a list of strings in ng-options, you need the comprehension expression looks like this
<select ng-model="currentField" ng-options="field for field in fieldNames"></select>
DEMO
So it turns out that the reason each item was repeating n times is that both my page and the layout template I was using both had
<script type = "text/javascript" src = https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>
As a result angular was apparently loading twice and running the ng-repeat on the ng-repeat, hence all the additional entries.