如何使用 ng-repeat 将对象数据传递到表答案

【问题标题】：how to pass object data to table using ng-repeat如何使用 ng-repeat 将对象数据传递到表
【发布时间】：2016-11-16 18:35:15
【问题描述】：

我有一个名为“SEG-Data”的对象，如下所示。我正在尝试使用 ng-repeat 将这些数据放入表格中。

SEG_Data 
  Object {ImportValues: Array[2]}
     ImportValues: Array[2]
        0: Object
              ImportArray: "0045614"
              Name: "dean"
              Type: "xyz"
        1: Object
              ImportArray: "2567741"
              Name: "dean"
              Type: "abc"
        length: 2

使用的表如下所示，我使用 ng-repeat，其中我提到了“SEG_data.ImportValues 中的字段”来获取值....但不知何故，我没有在 UI 上获取数据。

<table style="width:100%" border:"1px">
                <tr>
                    <th>ImportArray</th>
                    <th>Name</th>
                    <th>Type</th>
                </tr>
                <tr ng-repeat="field in SEG_Data.ImportValues">
                    <td>{{field.ImportArray}}</td>
                    <td>{{field.Name}}</td>
                    <td>{{field.Type}}</td>
                </tr>

            </table>

如果我在显示方面做错了有什么建议吗？

【问题讨论】：

从您的示例中，我希望该表有 2 行数据。你是说table的数据行数和你的json不匹配？您的 SEG_data 也是 $scope 变量吗？
它是“SEG_Data”，您在 ng-repeat 中使用了“SEG_data”。 JavaScript 变量区分大小写 :) 只需更正拼写即可。
我在 UI 上看不到任何数据。
@suzo- 这是一个错字。我在问题中更正了它

标签： javascript html angularjs angularjs-ng-repeat

【解决方案1】：

您的对象名为 SEG_Data，但您在模板中使用小写“d”引用 SEG_data。数据会随着这一变化正确显示。

对象

 $scope.SEG_Data = {
    ImportValues: [{
      ImportArray: "0045614",
      Name: "dean",
      Type: "xyz"
    }, {
      ImportArray: "2567741",
      Name: "dean",
      Type: "abc"
    }]
 };

模板

<table style="width:100%; border:1px">
    <tr>
        <th>ImportArray</th>
        <th>Name</th>
        <th>Type</th>
    </tr>
    <tr ng-repeat="field in SEG_Data.ImportValues">
        <td>{{field.ImportArray}}</td>
        <td>{{field.Name}}</td>
        <td>{{field.Type}}</td>
    </tr>
</table>

See plunker example

【讨论】：

我在这里发帖时打错了字。更正了问题中的错字
我添加了一个 plunker 示例；如果您将 D 大写，则代码可以正常工作。如果不是，问题可能出在您的对象上——它在哪里定义以及何时加载？

【解决方案2】：

工作示例：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
     $scope.SEG_Data = {
    ImportValues: [{
      ImportArray: "0045614",
      Name: "dean",
      Type: "xyz"
    }, {
      ImportArray: "2567741",
      Name: "dean",
      Type: "abc"
    }]
 };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <table>
        <tr>
            <th>ImportArray</th>
            <th>Name</th>
            <th>Type</th>
        </tr>
        <tr ng-repeat="field in SEG_Data.ImportValues">
            <td>{{field.ImportArray}}</td>
            <td>{{field.Name}}</td>
            <td>{{field.Type}}</td>
        </tr>
    </table>
</div>

【讨论】：