0x6B6F77616C74 0x6B6F77616C74 - 1 month ago 16
AngularJS Question

Cannot make dynamic two column table

I want to have a table with headers and data dynamically loaded from object of two arrays. Unfortunately, these rows aren't displayed.

http://jsfiddle.net/x7ur9u07/4/

<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<th>Input</th>
<th>Output</th>
<tr>
</thead>
<tbody>
<tr ng-repeat="inout in inoutContainer track by $index">
<td>{{ inout.input_vector[$index] }}</td>
<td>{{ inout.output_vector[$index] }}</td>
</tr>
<tr>
<td>
Foo
</td>
<td>
Bar
</td>
</tr>
</tbody>
</table>
</div>

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
window.alert('hello');
$scope.inoutContainer = {input_vector: ["0.0","0.0"], output_vector: ["0.0","0.0"]};
$scope.name = 'Superhero';
}

Answer

I managed to figure out a way to make it work -- you had a number of syntax errors that angularJS didn't understand

http://jsfiddle.net/x71jm9r8/

Basically I simplified the angularJS code

  • then added the ng-app directive to the container div

  • removed the track by $index part of the ng-repeat directive,

  • and finally added the myApp.controller() declaration.