I am very new to the UI development. I am using the AngularJS. I am trying to print all my values in a table. For that I am using Angularjs table. I have a headers and each header has multiple values. For one header the value will change based on the header. Here is my code.
<div>
<table datatable="ng"
class="table table-striped table-bordered dt-responsive nowrap"
cellspacing="0" width="100%">
<thead>
<tr>
<th>Entity Name</th>
<th>Field Name</th>
<th>{{headerName}}</th>
<th>DataType</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="entity in metadata">
<td>{{ entity.entityName }}</td>
<td>{{ entity.fieldName }}</td>
<td ng-if="entity.fieldLength != 'undefined'">{{entity.fieldLength}}</td>
<td ng-if="entity.familyName != 'undefined'">{{entity.familyName}}</td>
<td><select data-ng-init="dataType = entity.dataTypeList[0]"
data-ng-model="dataType"
data-ng-options="dataType for dataType in entity.dataTypeList"
class="form-control"
ng-change="onChange(entity.entityName,entity.fieldName,entity.fieldLength,dataType)"></select></td>
</tr>
</tbody>
</table>
</div>
Here if we observe one of the header "{{headerName}}" and this corresponding value will change based on this header. This headerName has two values (Field Length and Family Name). I used "ng-if" for this. Here are the two statements.
<td ng-if="entity.fieldLength != 'undefined'">{{entity.fieldLength}}</td>
<td ng-if="entity.familyName != 'undefined'">{{entity.familyName}}</td>
But when I execute this code I am getting an extra "td" in the table. Here is the output (Attachment).
So "FamilyName" are placed under "DataType" td. How can adjust this one. Can any one help me on this.?
Thanks in advance,
Amar.T
Not sure if I exactly follow but Is it possible you have four columns in your header and potentially 5 columns in your actual table? Is this the problem... also what happens when you do the following to check for undefined?
<td ng-if="typeof(entity.fieldLength) !== 'undefined'">{{entity.fieldLength}}</td>
<td ng-if="typeof(entity.familyName) !== 'undefined'">{{entity.familyName}}</td>
but why not combine the logic like so, so a vaue is shown without the ng-if and the need for two HTML columns?
<td>{{entity.fieldLength || entity.familyName}}</td>
Perhaps, also if possible you can move that logic into your controller (service,etc) That would make it easier to test. I think the answer above is correct also.
Related
I'd like to build a table with ng-repeat. But in my JavaScript code, instead of having a list with keys and values, I have 3 lists in one bigger list like this:
tableau = [{
'ws': wslist
},
{
'days': dayslist
},
{
'tnq': tnqlist
},
]
What's in the lists? wslist, dayslist, and tnqlist fill up themselves with dynamic datas in realtime that refresh themselves very frequently.
I'd like to know if I can display this data / these lists, in a table with ng-repeat ( and not with a static key/value pair dataset as we usually see like var table = [{perons : Arnold, Katty}, {Age : 24, 25}] and put them in row in a table with ng repeat).
I tried this :
<table cellpadding="20" rules="GROUPS" frame="BOX">
<thead>
<tr>
<th> </th>
<th class="xl154" style="width: 100px">
Day 1something like {{day.tableau}}
</th>
<th class="xl154" style="width: 100px">day 2</th>
<th class="xl154" style="width: 100px">day 3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in ctrl.tableau">
<td class="xl153">{{item.ws}}</td>
<td class="xl153">{{item.tnq}}</td>
</tr>
</tbody>
</table>
And I got this :
All the values of wslist are in one and same cell and in row. They should be separated and each on in its cell in column. My table should look like this, more specifically like this. (on the pic, the values of tnq% are meant to be read vertically in column for day 1 for example, then for day 2 also vertically etc...)
To give you an idea of the length and the nature of the list, you have in the first pic: in red, this is the wslist and in the second: in blue you have the tnqlist and in red the dayslist.
Do you know if it is possible to do it with ng-repeat and if so, how can I do to order each element of the list in a cell in column for the wslist and the tnqlist (so 2 separated columns) ? or ifit is not possible is there any other way I can build a table as in the picture "table I should have" with my list of dynamic lists?
Thank you very much for all answers that may help
Sadly, what you're trying to do is more complex than expected and we don't know the relationship between the data.
Here is a plnkr based on your explanation: https://plnkr.co/edit/REHNDW8CU330yBPY
So, my recommendation would be:
For the titles, you can iterate over the list of days. Something like:
<head>
<tr>
<th>Web Service </th>
<th style="width: 100px" ng-repeat="day in daysList">
{{day}}
</th>
</tr>
</thead>
Then, for each service, you will have to iterate writing the name, but also looking for the value of each day. Something like this:
<tr ng-repeat="ws in wsList">
<td class="xl153">{{ws}}</td>
<td style="width: 100px" ng-repeat="day in daysList">
{{getValue(ws, $parent.$index, day, $index)}}.
</td>
</tr>
Where getValue is a custom function based on your needs to get the information.
Hi I am new to angular and type script..I need to check whether table is empty or not and depending upon that I need to hide or display a div. I tried,
var rows = document.getElementById('associatedEmailsTable'))rows; and
var rows =(<HTMLInputElement>document.getElementById('associatedEmailsTable')).rows;
but both are giving same result, Please help me in this.
Please suggest me how can I find whether table tr has any value inside it or not using javascript.
and My HTML code is
<table class="table table-sm table-hover" id="associatedEmailsTable" style="display:none">
<tr>
<th>
Email
</th>
<th>
Action
</th>
</tr>
<tr *ngFor="let oEmailAddress of this.associatedEmailAddresses">
<td>{{oEmailAddress.email}}</td>
</tr>
</table>
The issue is exactly what the error says, "Property Rows does not exist on type HTMLInputElemet".
Assuming that you have <table id="associatedEmailsTable">... then what you have is a HTMLTableElement.
So:
var rows = (document.getElementById('associatedEmailsTable') as HTMLTableElement).rows;
I need to render a table in which the user is allowed to edit some fields for each row, fields that will affect other fields in the same row.
For this reason I could not use bind-once on all the data I'm rendering.
If I got it right, simply using a code like the following
<table class="table table-bordered table-condensed table-hover">
<thead>
<tr class="info">
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in alist">
<td>{{::a.id}}</td>
<td>{{::a.cod}}</td>
<td>
<input
ng-model="a.sel"
type="checkbox"
class="input-sm"></input>
</td>
<td ng-if="a.sel">
{{::a.desc}}
</td>
<td ng-if="!a.sel">
"Other Content"
</td>
</tr>
</tbody>
will cause that for each time a user checks or uncheks the a.sel checkbox, all the angular {{vars}} in the page (not the {{::vars}}) will be watched for changes.
If this is true (and therefore that's the reason why page is slow when hundreds of rows are loaded) how could I tell angular I only want it to check if something has changed inside that specific row, that specific ng-repeat iteration?
Not sure how to proceed to get good performances, any other tips are appreciated.
Try using track by to tell angular what it should be evaluating on:
<tr ng-repeat="a in alist track by $index">
or
<tr ng-repeat="a in alist track by a.id">
more on that in the ng-repeat documentation
I am using AngularJS. I would like to make a table to sort by the first column immediately after the webpage finish loading. The HTML table code looks like this;
<table class="table table-hover data-table sort display">
<thead>
<tr>
<th class="col_1">
Column 1
</th>
<th class="col_2">
Column 2
</tr>
</thead>
<tbody>
<tr ng-repeat="item in filteredList | orderBy:columnToOrder:reverse">
<td>{{item.col_1}}</td>
<td>{{item.col_2}}</td>
</tr>
</tbody>
</table>
Now, the table simply loads the data without any particular sorting order as the webpage loads until I click on the column heading. If I want to set the default to be sorted by column 1 immediately after the webpage loads, how should the html code look like? Or do I have to modify the controller instead?
Thank you.
In your controller you can initialize the value of columnToOrder like this:
$scope.columnToOrder = 'col_1';
I just stepped into the AngularJS world, and need a solution for the application I am working on.
So here is the definition of the module.
var samplesApp = angular.module('samples', []);
samplesApp.controller('samplesController', function ($scope) {
var jsonObj=
[
{"ACTION":"UPDATE","ID":"22","ROUTE":"0015"},
{"ACTION":"DELETE","ID":"20","ROUTE":"0015"},
{"ACTION":"UPDATE","ID":"19","ROUTE":"0015"}
]
$scope.records = jsonObj;
var columnNames = [];
for (var key in jsonObj[0]) {
columnNames.push(key);
}
$scope.columnNames = columnNames;
});
The $scope JSON object is a part of the output of the real data that comes from database. and I need to put these data into a table dynamically
The html is like
<table>
<thead>
<th data-ng-repeat="column in columnNames">{{column}}</th>
</thead>
<tr data-ng-repeat="record in records">
<td data-ng-repeat="column in columnNames">{{ record.{{ column }} }}</td>
</tr>
</table>
Because I have no idea what the column name is, so I made a process to get all the column names and push them into $scope.columnNames. and then bind it to the table header. There is no problem for this part. The issue is I don't know how to get the value coresponse to the specific column. I was trying to do it like this:
<td data-ng-repeat="column in columnNames">{{ record.{{ column }} }}</td>
But apparently it is not working.
Can someone give me some advice? really appreciate it.
Try using brackets, like this:
<tr data-ng-repeat="record in AllRecords">
<td data-ng-repeat="column in columnNames">{{ record[column] }}</td>
</tr>
The expressions inside {{ }} (moustaches?) are evaluated pretty narrowly to how regular javascript is evaluated.
Accessing with the record[column] operator is OK, but
you could try this other alternative. In this example, the semantics
of the code is a bit better, and you have less coupling (your rows just
depend on the data, not the variable used in the header):
<table>
<tr>
<th data-ng-repeat="column in columnNames">{{column}}</th>
</tr>
<tr data-ng-repeat="record in records">
<td data-ng-repeat="(key,value) in record">{{value}}</td>
</tr>
</table>
Here's the working example with your data: http://plnkr.co/edit/CskLQ2ZZlYIURdNPXiZt?p=preview
Here's the Angular docs for the ngRepeat directive (look for "key, value")