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>

在表行角度中显示json数组列表

1 个答案: