根据列表填充表格字段-AngularJS

时间:2018-12-31 10:17:36

标签: angularjs

我在表格中填充了以下json。我陷入了必须在列表内的列表内填充字段的问题。

请提供有关如何更改ng-repeat选项的帮助。

我的JSON

{
   "facets": {"totalCustomerfound": 2},
   "customers":    [
            {
         "fullName": "kelly johnson",
         "firstName": "kelly",
         "lastName": "johnson",
         "partyAdresses":          [
                        {
               "addressType": "mailing",
               "address1": "111 WILLOW ST",
               "zipCode": "14805-1912",
               "city": "SCRANTON",
               "state": "PA"
            },
                        {
               "addressType": "home",
               "address1": "111 WILLOW ST",
               "zipCode": "14805-1912",
               "city": "SCRANTON",
               "state": "PA"
            }
         ],
         "membershipList": []
      },
            {
         "fullName": "kelly johnson",
         "firstName": "kelly",
         "lastName": "johnson",
         "partyAdresses": [         {
            "addressType": "mailing",
            "address1": "111 WILLOW ST",
            "zipCode": "14805-1912",
            "city": "SCRANTON",
            "state": "PA"
         }],
         "membershipList": [         {
            "termEffectiveDate": "2005/05/31",
            "termExpirationDate": "2018/05/31",
            "policyNumber": "12345",
            "memType": "PREMIER",
            "roleList": [            {
               "roleStartDate": "2005/05/31",
               "membershipNumber": "42221234505010"
            }]
         }]
      }
   ]
}

我的表格正文

<tbody>
    <tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_records">
        <td ng-bind="row.firstName"></td>
        <td ng-bind="row.lastName"></td>
        <td><div ng-repeat="membershipNumber in row.membershipList.roleList">{{membershipNumber.membershipNumber}}</div></td>
        <td><div ng-repeat="addr in row.partyAdresses">{{addr.address1}}, {{addr. city}}, {{addr. state}}, {{addr. zipCode}}</div></td>
    </tr>
</tbody>

1 个答案:

答案 0 :(得分:1)

假设将您的json对象分配给您的json对象,如下所示:

您的js文件:

$scope.display_records = {};
var list = your_json_object;
$scope.display_records = list;

您的带有表的html文件:

<table>
<tbody>
    <tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_records.customers">
        <td>{{row.firstName}}</td>
        <td>{{row.lastName}}</td>
        <td><div ng-repeat="member in row.membershipList">{{member.roleList[0].membershipNumber}}</div></td>
        <td><div ng-repeat="addr in row.partyAdresses">{{addr.address1}}, {{addr. city}}, {{addr. state}}, {{addr. zipCode}}</div></td>
    </tr>
</tbody>
</table>

您的带有ul的html文件:

<ul ng-repeat="row in display_records.customers">
        <li >{{ row.firstName }}</li>
        <li >{{ row.lastName }}</li>
        <li>
            <ul ng-repeat="member in row.membershipList">
                <li>{{member.roleList[0].membershipNumber}}</li>
            </ul>
        </li>
        <li>
            <ul ng-repeat="addr in row.partyAdresses">
                <li>{{addr.address1}}, {{addr. city}}, {{addr. state}}, {{addr. zipCode}}</li>
            </ul>
        </li>
</ul>