Cannot make dynamic two column table

Question

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 1

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.

Cannot make dynamic two column table

Sign up