Показать список массива json в строке строки угловой

Question

Я пытаюсь показать данные массива JSON в строке таблицы.Но я делаю это неправильно через ng-repeat.У меня есть поле ввода текста с функцией только для чтения внутри строки таблицы.Я должен показать внутри поля ввода текста.

Данные JSON:

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

Мой вид: -

<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>

Мой заголовок таблицы исправлен, поэтому я не включил его.

РЕДАКТИРОВАТЬ: - Обновлен вид

<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>

Answer 1

Если ваш массив list содержит несколько массивов, вам понадобится дополнительный ng-repeat. Оберните его в <div> или что-то подобное, чтобы внутренний массив поместился в один ряд (из первого ng-repeat). Вот демо:

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>