I'm using angularJS to create an table. But it didn't works so great atm.. here my problem.
Code:
appGenerator.controller('customersCtrl', function ($scope) {
$scope.names = [
{"Name": "EMAIL", "StringValue": "dsa#dsada", "Type": "C"},
{"Name": "DESC", "StringValue": "Test","Type": "C"}
];
});
HTML:
<table class="table">
<tr ng-repeat="tableItem in names">
<td ng-repeat="item in tableItem">{{item}}</td>
</tr>
</table>
At the moment I get the whole Item. But I want the the "StringValue".
I tested
<td ng-repeat="item in tableItem">{{item.StringValue}}</td>
But it doesn't works. I don't get any output. What I'm doing wrong?
You should do it like the following;
<table class="table">
<tr ng-repeat="tableItem in names">
<td>{{ tableItem.name }}</td>
<td>{{ tableItem.StringValue }}</td>
<td>{{ tableItem.Type }}</td>
</tr>
</table>
You already iterated the names. Then you should use the object.
Your second ng-repeat is on object's {"key": "value"} pair so ng-repeat should be as follows:
<table class="table">
<tr ng-repeat="tableItem in names">
<td ng-repeat="(key, value) in tableItem">{{key}} {{value}}</td>
</tr>
</table>
Please refer: How can I iterate over the keys, value in ng-repeat in angular
Related
I was trying to bind simple JSON data to <table>. But, my html page is showing empty data, but the row count is showing as per data. The data inside each <tr> is empty. Not sure what's wrong with my code.
Can someone help me if I am doing anything wrong here?
Pay.Component.ts
#Component({
moduleId: module.id,
templateUrl: './pay.component.html'
})
export class PayComponent {
myData: any[] = [
{
"Col1": "120f2dcf-d4a4-4b3c-994a-e4e0c79bd642",
"Col2": "2017-03-27T00:00:00-07:00",
"Col3": "Testing1"
},
{
"Col1": "320f2dcf-d4a4-4b3c-994a-e4e0c79bd642",
"Col2": "2018-03-27T00:00:00-07:00",
"Col3": "Testing2"
}]
}
pay.component.html
<div class="content table-responsive table-full-width">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let pay of myData'>
<td>{{ pay.col1 }}</td>
<td>{{ pay.col2 }}</td>
<td>{{ pay.col3 }}</td>
</tr>
</tbody>
</table>
</div>
Not sure what's going wrong with code.
My bad. I found the issue as i was using lower case when the data was binding to the table.
Fixed the issue after changing to UPPER Case {{ pay.Col1 }}
I am using angular datatables https://l-lin.github.io/angular-datatables and noticed that the ng-repeat is done twice. I noticed it with the following directive.
<tr ng-repeat="order in vm.orders track by order.id" repeatlogger>
app.directive('repeatlogger', function() {
return function (scope, element, attrs) {
console.log(scope.$index);
}
I am using the Angular way, see HTML tab at https://l-lin.github.io/angular-datatables/#/angularWay
<table datatable="ng" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in vm.persons | limitTo: 50" repeatlogger>
<td>{{ person.ID }}</td>
<td>{{ person.Firstname }}</td>
<td>{{ person.Lastname }}</td>
</tr>
</tbody>
</table>
Using a ng-repeat on a div shows that it iterates once over the collection.
Which reasons exist, that angular-datatables iterates twice over the collection?
I was trying to make a dynamic table that depending how the JSON is made it loads all the data accordingly. So far I have this:
HTML responsible for creating the table:
<div class="container" ng-controller="QuotationsController as vm">
<h2>Quotations</h2>
<p>
Create Quotation
</p>
<table class="table">
<tr ng-repeat="Quotation in vm.Quotations">
<th ng-repeat="(key,val) in Quotation"> {{ key }} </th>
</tr>
<tr ng-repeat="Quotation in vm.Quotations">
<td ng-repeat="(key,val) in Quotation"> {{ val }}</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</table>
Controller:
(function () {
"use strict";
angular
.module("PPM")
.controller("QuotationsController", ["QuotationsService", QuotationsController]);
function QuotationsController(QuotationsService) {
var vm = this;
vm.Quotations = [
{
"ID": 1,
"Description": "Leaf Rake",
"Name": "GDN-0011",
},
{
"ID" : 2,
"Description": "Garden Cart",
"Name": "GDN-0023",
},
{
"ID": 5,
"Description": "Hammer",
"Name": "TBX-0048",
},
{
"ID": 8,
"Description": "Saw",
"Name": "TBX-0022",
},
{
"ID": 10,
"Description": "Video Game Controller",
"Name": "GMG-0042",
}
];
}
})();
(I have hard-coded the data in the controller for testing purposes only. I will later delete this and make calls to a Web API.)
This gives me the following result:
I don't want the table headers to be repeated for each Quotation that exists. I just want to display it once, but I don't know how to acess the properties without ng-repeat. How can I do this?
Either have your controller loop through the first result or have the html do it. Either way.
Html way
<div class="container" ng-controller="QuotationsController as vm">
<h2>Quotations</h2>
<p>
Create Quotation
</p>
<table class="table">
<tr >
<th ng-repeat="(key,val) in vm.Quotations[0] ">
{{ key }}
</th>
</tr>
<tr ng-repeat="Quotation in vm.Quotations">
<td ng-repeat="(key,val) in Quotation">
{{ val }}
</td>
<td>
Edit | Details | Delete
</td>
</tr>
</table>
You have multiple headers because you used ng-repeat on <tr> element containing <th> elements. Remove ng-repeat.
<table class="table">
<tr>
<th ng-repeat="(key,val) in vm.Quotation[0]"> {{ key }} </th>
</tr>
<tr ng-repeat="Quotation in vm.Quotations">
<td ng-repeat="(key,val) in Quotation"> {{ val }}</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</table>
Something like that should work.
You probably would like to add ng-if in case there is 0 elements.
From a Rest Api I am getting the following:
{
"headers": ["h1", "h2"],
"body": [{"h1": "a1", "h2":"a2"},
{"h1": "b1", "h2":"b2"},
... ]
}
Now I would like to transform this one into an (orderable table) with angular. I tried:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="header in data.headers">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="line in data.body">
<td ng-repeat="(key, val) in line">{{ val | date : "dd.MM.yy" }}</td>
</tr>
</tbody>
</table>
Of course it does not work, as objects do not have a key order in javascript.
Is there a simple way to sort the line by headers?
You can do this very simple:
<tr ng-repeat="line in data.body">
<td ng-repeat="header in data.headers">{{ line[header] | date : "dd.MM.yy" }}</td>
</tr>
Here , i wanna retrieve my subdocument array data from nested JSON object using Angular ng-repeat
this is my JSON nested object:
[
{
_id: "5693bc169f5d75301ff5999d",
booking:
[
{
can_name: "Kinley",
can_quantity: "5",
can_cost: "200",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "18214",
address: "140,Bajanai koil street, Melmanagar,Poonamallee,Chennai",
_id: "5694926fd6227ee408b9d051",
ordered_at: "2016-01-12T05:43:11.076Z",
status: "UnderProcess"
}
]
},
{
_id: "5693baf07fe08c6012034b13",
booking:
[
{
can_name: "Kinley",
can_quantity: "4",
can_cost: "160",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "14426",
address: "154,Pilliayar koil street,Poonamallee,Chennai",
_id: "569491fad6227ee408b9d04f",
ordered_at: "2016-01-12T05:41:14.531Z",
status: "UnderProcess"
},
{
can_name: "Bisleri",
can_quantity: "5",
can_cost: "250",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "11391",
address: "154,Pilliayar koil street,Poonamallee,Chennai",
_id: "5694923ad6227ee408b9d050",
ordered_at: "2016-01-12T05:42:18.900Z",
status: "UnderProcess"
}
]
}
]
Angular Controller Code:
$http.get('/auth/booking-date/' + id).success(function(response){
$scope.todaylist = response;
console.log(response);
$scope.today = '';
});
Here, how can i use ng-repeat to retrieve every subdocument data.
this is what am tried, but am not able get every data:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Address</th>
<th>Can Name</th>
<th>Can Quantity</th>
<th>Can Cost</th>
<th>Timeslot</th>
<th>Delivery Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="today in todaylist">
<td>{{today._id}}</td>
<td>{{today.booking[0].address}}</td>
<td>{{today.booking[0].can_name}}</td>
<td>{{today.booking[0].can_quantity}}</td>
<td>{{today.booking[0].can_cost}}</td>
<td>{{today.booking[0].delivery_timeslot}}</td>
<td>{{today.booking[0].delivery_date | date:'dd-MM-yyyy'}}</td>
</tr>
</tbody>
</table>
</div>
Help will be appreciated...
See above i posted my JSON data instead of Link
I am not sure but check if this solves your problem:
<tr ng-repeat="today in todaylist">
<div ng-repeat="bookingObj in today.booking">
<td>{{today._id}}</td>
<td>{{bookingObj.address}}</td>
<td>{{bookingObj.can_name}}</td>
<td>{{bookingObj.can_quantity}}</td>
<td>{{bookingObj.can_cost}}</td>
<td>{{bookingObj.delivery_timeslot}}</td>
<td>{{bookingObj.delivery_date | date:'dd-MM-yyyy'}}</td>
</div>
</tr>
I am just applying my logic directly here. Try this:
<tbody ng-repeat="today in todaylist">
<tr ng-repeat="bookingObj in today.booking">
<td>{{today._id}}</td>
<td>{{bookingObj.address}}</td>
<td>{{bookingObj.can_name}}</td>
<td>{{bookingObj.can_quantity}}</td>
<td>{{bookingObj.can_cost}}</td>
<td>{{bookingObj.delivery_timeslot}}</td>
<td>{{bookingObj.delivery_date | date:'dd-MM-yyyy'}}</td>
</tr>
</tbody>
Also, try removing this line, I guess it because this line will replace current content of today, and hence no data will be displayed:
$scope.today = '';
Just use the below code
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Address</th>
<th>Can Name</th>
<th>Can Quantity</th>
<th>Can Cost</th>
<th>Timeslot</th>
<th>Delivery Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="today in todaylist">
<div ng-repeat="booking in today.booking">
<td>{{today._id}}</td>
<td>{{booking.address}}</td>
<td>{{booking.can_name}}</td>
<td>{{booking.can_quantity}}</td>
<td>{{booking.can_cost}}</td>
<td>{{booking.delivery_timeslot}}</td>
<td>{{booking.delivery_date | date:'dd-MM-yyyy'}}</td>
</div>
</tr>
</tbody>
</table>
</div>
It looks like your objects are stored in the booking array. To iterate through this array and add a new row on your DOM for each item in your array, I'd suggest the following:
<tbody>
<tr ng-repeat="booking in todaylist.booking">
<td>{{ today._id }}</td>
<td>{{ booking.address }}</td>
<td>{{ booking.can_name }}</td>
<td>{{ booking.can_quantity }}</td>
<td>{{ booking.can_cost }}</td>
<td>{{ booking.delivery_timeslot }}</td>
<td>{{ booking.delivery_date | date:'dd-MM-yyyy' }}</td>
</tr>
</tbody>
For the sake of clarity, you may want to change the variable name of your array from booking to bookings. I find it less confusing to keep the variable names of collections as plural nouns. This makes it easier to easily identify what to expect in your collection.
With that change, you'd have:
<tbody>
<tr ng-repeat="booking in todaylist.bookings">
<td>{{ today._id }}</td>
<td>{{ booking.address }}</td>
<td>{{ booking.can_name }}</td>
<td>{{ booking.can_quantity }}</td>
<td>{{ booking.can_cost }}</td>
<td>{{ booking.delivery_timeslot }}</td>
<td>{{ booking.delivery_date | date:'dd-MM-yyyy' }}</td>
</tr>
</tbody>