在表格行角度显示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>