I'm trying to figure out what I am doing wrong here. For some reason angular will build out the div structure 10 times because there are 10 items in $scope.aggregators. However it doesn't build out the TR structure at all?
<div class="info-pane" ng-controller="CatalogCtrl">
<table id="records">
<thead>
<tr>
<th><span>Vendor Code</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="aggregator in aggregators}">
<td>{{aggregator.vendor_code}}</td>
</tr>
</tbody>
</table>
<div ng-repeat="aggregator in aggregators">
</div>
remove } from ng-repeat="aggregator in aggregators}"
Related
Can anyone help me learn how to convert an HTML table into a dynamic Javascript table using the for loop? This is an example I found in my book and wanted to see how I could go about doing this.
Heading There is sections of the table that need to have the rows combined and he columns combined. I have been struggling with this for some time. Any help would be appreciated. I did not include the CSS portion of the code only the table.
<html>
<body>
<table class="table">
<tr>
<th colspan= "3" class= "MH">Conversion Tables</th>
</tr>
<tr>
<th rowspan="3" class="heading1">Meters to
<br />Feet</th>
<td>1 meter</td>
<td>3.28 feet</td>
</tr>
<tr class="difrow">
<td>50 meters</td>
<td>164.04 feet</td>
</tr>
<tr>
<td>100 meters</td>
<td>328.08 feet</td>
</tr>
<tr class="difrow">
<th rowspan="3" class="heading1">Kilometers to
<br />Miles</th>
<td>1 kilometer</td>
<td>0.62 miles</td>
</tr>
<tr>
<td>50 kilometers</td>
<td>31.07 miles</td>
</tr>
<tr class="difrow">
<td>100 kilometers</td>
<td>62.14 miles</td>
</tr>
</table>
</body>
</html>
you can add id attribute to table tag then call a javascript method on page load:
<table class="table" id="tableId">
function createRows(){
var items = "<tr><td></td></tr>...";
document.getElementById("tableId").innerHTML = items;
}
in javascript method you can use for to generate table rows.
I have an object that looks like this:
[{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}]
My angular/html code looks like this:
<table class="Names">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr ng-repeat-start="value in msg.object">
<td rowspan="2">{{value.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in msg.object">
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
The names show up fine and vertically how i'd want them to be in the table (first column),
but for each value of name i get both of the ages displaying instead of just the age for that person.
Can anyone guide me in the right direction here? I feel like I'm close but just picked up angular today so I'm new to it and ng-repeat.
You only need a simple row repeat with 2 cells in each row
<tr ng-repeat="value in msg.object">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
Your table format is wrong. Place the headers inside and do a ng-repeat to generate tr
DEMO
var app =angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.users = [{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table border="2">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr ng-repeat="user in users">
<td >{{user.name}}</td>
<td >{{user.age}}</td>
</tr>
</table>
</body>
I have this table
<table id="tblTasks">
<thead>
<tr>
<th>Name</th>
<th>Due</th>
<th>Category</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I have a table as above and script as below
<script id="taskRow" type="text/x-jQuery-tmpl">
<tr>
<td>${task}</td>
<td>
<time datetime="${requiredBy}">${requiredBy}</time>
</td>
</td>
<td>${category}</td>
<td>
<nav>
Edit
Complete
Delete
</nav>
</td>
</tr>
</script>
Basically, how it works at the moment is when I click the Delete button the code below will run
storageEngine.delete('task', $(evt.target).data().taskId, ....
taskId is the value from data-task-id="${id}" now, I have another button that delete all the tasks. I'm trying to cycle through all the rows in the table and find the Delete button then apply the storageEngine.delete but don't know how.
How can I do this?
Try this:
var dataList = $(".deleteRow").map(function() {
return $(this).data("task-id");
}).get();
console.log(dataList.join('|'));
I have the following json array string
queryResults=
[
{"name":"cliff","age":"20","hobby":"tennis","email":"cliff#gmail.com"},
{"name":"jason","age":"30","hobby":"golf","email":"jason#gmail.com"}
]
I need to use ngFor to produce the following html layout
<table>
<tr>
<td>name:</td><td>cliff</td>
<td>age:</td><td>20</td>
</tr>
<tr>
<td>hobby:</td><td>tennis</td>
<td>email:</td><td>cliff#gmail.com</td>
</tr>
</table>
<table>
<tr>
<td>name:</td><td>jason</td>
<td>age:</td><td>30</td>
</tr>
<tr>
<td>hobby:</td><td>golf</td>
<td>email:</td><td>jason#gmail.com</td>
</tr>
</table>
How can i accomplish this? any suggestion will be helpful thank you
Assuming that your JSON is in array form, you can solve this by using *ngFor like this
<table *ngFor="#it of queryResults">
<tr>
<td>Name:</td><td>{{it.name}}</td>
<td>Age:</td><td>{{it.age}}</td>
</tr>
<tr>
<td>hobby:</td><td>{{it.hobby}}</td>
<td>email:</td><td>{{it.email}}</td>
</tr>
</table>
Am trying to do like this,
<table>
<tr id="ID1"><td></td></tr>
<tr id="ID2"><td></td></tr>
</table>
I need to swap table rows index position like as follows
<table>
<tr id="ID2"><td></td></tr>
<tr id="ID1"><td></td></tr>
</table>
I tried to fix it using jQuery as:
$('#ID1').after('#ID2');
Can anyone help me to fix the above requirement using javascript?
$('#ID1').after('#ID2');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id="ID1">
<td></td>
</tr>
<tr id="ID2">
<td></td>
</tr>
</table>
after() is used to insert content. To move or add elements, use insertAfter():
$('#ID1').insertAfter('#ID2');
Example fiddle
Swap row by appendChild.
var x = document.getElementById("first");
var table = document.getElementById("table");
table.appendChild(x);
<table id="table">
<tr id="first"><td>First</td></tr>
<tr id="second"><td>Second</td></tr>
</table>