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';
}
I managed to figure out a way to make it work -- you had a number of syntax errors that angularJS didn't understand
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.