AngularJS dynamic table using 2x2 array data using ng-repeat

Question

I have a json structure which I am trying to bind to a table and i'm trying to do the best I can to use ng-repeats to avoid boilerplate code.

My json structure is as follows:

{ 
    "data": {
        "field1": 2809,
        "field2": {
            "10": [1, 2, 3, 4, 3, 0, 0, 0, 0],
            "20": [2, 3, 4, 5, 6, 7, 8, 9, 0],
            ....
            "100": [2, 3, 4, 5, 6, 7, 8, 9, 0]
}

I am trying for this to autogenerate in such a way that my table appears like this

Field0 Field1 Field2 Field3 Field4 Field5 Field6 Field7 Field8 Field9 Field10
-----------------------------------------------------------------------------
10     1       2      3      4      3      0      0     0      0         13
20     2       3      4      5      6      7      8     9      0         44
...
100    2       3      4      5      6      7      8     9      0         44

I am not sure how to get the ng-repeats for this to work

Here is a sample markup I am using

<tr ng-repeat="nums in tabData.field2">
    <td ng-repeat="num in nums">
        {{ num[$index] }}
    </td>
</tr>

The table is completely broken if I do this and I only get [1, 2 ... 0] in a single row. I am not sure how I can get this to work if I can get this to work.

I get this error

angular.js:15536 Error: [ngRepeat:dupes] 
http://errors.angularjs.org/1.7.5/ngRepeat/dupes? 
p0=degree%20in%20degrees&p1=number%3A0&p2=0
    at angular.js:99
    at angular.js:33721
    at angular.js:18963
    at m.$digest (angular.js:19103)
    at m.$apply (angular.js:19463)
    at k (angular.js:13312)
    at w (angular.js:13569)
    at XMLHttpRequest.E.onload (angular.js:13474) undefined

Daniel Manta · Accepted Answer · 2020-10-18 16:04:27Z

1

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.tabData = {
    "data": {
      "field1": 2809,
      "field2": {
        "10": [1, 2, 3, 4, 3, 0, 0, 0, 0],
        "20": [2, 3, 4, 5, 6, 7, 8, 9, 0],
        "100": [2, 3, 4, 5, 6, 7, 8, 9, 0]
      }
    }
  };
});

td input {
  width: 35px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table>
    <tr>
      <td ng-repeat="head in tabData.data.field2['10'] track by $index">
        Field{{ $index + 1 }}
      </td>
    </tr>
    <tr ng-repeat="(row,col) in tabData.data.field2 track by $index">
      <td ng-repeat="field in col track by $index">
        <input ng-model="tabData.data.field2[row][$index]" value="{{field}}" type="text" />
      </td>
    </tr>
  </table>
  <span>{{tabData}}</span>
</div>

edited Oct 18, 2020 at 16:04

answered Oct 18, 2020 at 0:30

Daniel Manta

6,76317 gold badges43 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

p0tta Over a year ago

Thanks for the answer. It works very well. Instead of displaying the values in a read-only table, I have added an input tag inside the td to be able to modify the values. After I do that, if I change the values in the input (which is bound to field), it still doesn't reflect in the scope variable. Do you know how to fix that?

Daniel Manta Over a year ago

I have edited my answer. You can use two way binding so when the input is updated so it's the model.

p0tta Over a year ago

Wonderful. Thank you! Much appreciated. I didn't know what to put in the ng-model exactly for 2 way binding.

p0tta Over a year ago

I am now trying to add a couple more things to my table. I am trying to add the root elements of the json 10,20, ... 100 to the first column and a sum to the last column. I edited the table representation above. I am not sure if this can be done. Tried to do this with <label ng-if="$index === 0">{{row}}</label> and I get the row but the last row is getting cut off. Is there any way I can loop from -1 to column+1 and add whatever I need?

Daniel Manta Over a year ago

Please create a new question and include the code you have so far.

|

Collectives™ on Stack Overflow

AngularJS dynamic table using 2x2 array data using ng-repeat

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related