CODEWITHSUNDEEP
arraysangularjsjsonhtml-table
WhoAmI
WhoAmI

Reputation: 317

Show json array list in table row angular

I am trying to show JSON array data in table row. But I am doing it wrong through ng-repeat. I have a text input field with read only feature inside the table row. I have to show inside the text input field.

JSON data :

$scope.list=[
{
    "ID": "1",
    "Source": [
        "AA",
        "AVV",
        "WEB",
        "DEB"
    ]
}
]

My View:-

<tbody>
<tr role="row" class="">
        <td class="sorting_1" ng-repeat="row in list.Source">
        <input readonly="readonly" id="reg_input" class="form-control" type="text"/>
        </td>
</tr>
</tbody>

My table header is fixed So I haven't included that.

EDIT:- Updated View 

<table id="datatable_demo" class="table>
    <thead>
        <tr role="row">
            <th class="text-center">Source</th>
            <th class="text-center">Target</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row" class="" ng-repeat="ff in setup_list">
            <td class="sorting_1" ng-repeat="data in ff.SourcePortGroups track by $index">
                <input readonly="readonly" id="reg_input" ng-model="data" class="form-control" type="text"/>
            </td>
            <td>
            <select id="reg_select" class="form-control">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Views: 1612

Answers (1)

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

If your array list has multiple arrays within it, then you need an additional ng-repeat. Wrap it in <div> or something so the inner array will fit in a single row (from the first ng-repeat). Here is a demo:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.list = [{
      "ID": "1",
      "Source": [
        "AA",
        "AVV",
        "WEB",
        "DEB"
      ]
    },
    {
      "ID": "2",
      "Source": [
        "BB",
        "BWW",
        "BEW",
        "BED"
      ]
    }
  ]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div ng-app="myApp" ng-controller="myCtrl">

  <table class="table">
    <tr ng-repeat="row in list">
      <td>
        <div ng-repeat="data in row.Source">
          <input readonly="readonly" ng-model="data" type="text" />
        </div>
      </td>
    </tr>
  </table>

</div>

Upvotes: 1

Related Questions