如何使用ng-repeat将对象数据传递给表格

我有这个名为'SEG-Data'的对象，如下所示。我试图用ng-repeat将这些数据放入表格中。如何使用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重复其中i“在SEG_data.ImportValues场” mentiond得到的值....但不知何故，我没有得到在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>

任何意见，如果我这样做是错误的显示??

来源

2016-11-15 Adu Rao

从你的榜样，我希望该表有2行数据。你是说表中的数据行数与你的json不匹配？你的SEG_data也是$ scope变量吗？ –

它是“SEG_Data”，你在ng-repeat中使用了“SEG_data”。 JavaScript变量区分大小写:)只要纠正拼写，它应该工作。 – superUser

我无法在用户界面上看到任何数据。 –

您的对象称为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

来源

2016-11-15 19:04:39 shanzilla

在我张贴在这里时，tat是一个错字。纠正了在 –

这个问题中的错字我添加了一个plunker的例子;代码工作正常，如果你大写D.如果不是这个问题可能与你的对象 - 它在哪里定义，何时加载？ – shanzilla

工作实施例：

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>

来源

2016-11-16 10:35:15

如何使用ng-repeat将对象数据传递给表格

回答

相关问题