如何使用AngularJS在HTML表格中显示嵌套的JSON元素[关闭]答案

【问题标题】：How to display nested JSON elements in HTML table with AngularJS [closed]如何使用AngularJS在HTML表格中显示嵌套的JSON元素[关闭]
【发布时间】：2015-06-22 22:28:30
【问题描述】：

我有以下带有嵌套元素的 JSON

[
    {
        "firstName": "John",
        "lastName": "Smith",
        "gender": "m",
        "places": [{
            "name": "London",
            "contacts": [{
                "type": "phone",
                "value": "123456789"
            },{
                "type": "email",
                "value": "johnsmith@example.com"
            }]
        }, {
            "name": "Paris",
            "contact": [{
                "type": "phone",
                "value": "987654321"
            }]
        }]
    },
    {
        "firstName": "Jane",
        "lastName": "Doe",
        "gender": "f",
        "places": [{
            "name": "Paris",
            "contacts": [{
                "type": "email",
                "value": "janedoe@example.com"
            }]
        }]
    }
]

我正在尝试使用 AngularJS 和 ng-repeat 在 HTML 表格中显示它，如下所示：

姓名地点电子邮件电话 -------------------------------------------------- -------- Jonh Smith 伦敦 smith@example.com 123456789 巴黎 987654321 Jane Doe Paris doe@example.com

有没有一种很好的方法（一次性 - 没有太多嵌套循环）或者我真的应该在每个“td”元素中一遍又一遍地循环接触？

编辑：我在这里寻找像this 这样的答案，我想出的唯一“解决方案”（如果我什至可以称之为）是在每个“表数据”元素中迭代位置及以上，因此，如果每个人有 3 个位置和 4 个电话/电子邮件，则每个单元格将进行 12 次迭代或每人（行）进行 48 次迭代。

在 ng-repeat 中真的没有聪明的方法来做到这一点，还是我应该放弃嵌套 JSON 的表格布局？

【问题讨论】：

你可以对你想要的值的 td 做一个 ng-bind 并给它一个函数。该函数将获取您要显示的数据数组，从中提取数据并将其作为字符串返回。保持您的 HTML 模板干净。

标签： angularjs json html-table angularjs-ng-repeat

【解决方案1】：

根据我对您的问题的评论举一个例子：在每个 td 上使用 ng-bind-html 并为其使用接收 {object}.places 数组的函数。（在我的 html 中，我将其命名为 person），然后在该函数中从数组中获取您想要的数据并将其作为字符串返回

angular.module('app', ['ngSanitize']).controller('testCtrl', ['$scope', function($scope) {
    $scope.persons = [{
      "firstName": "John",
      "lastName": "Smith",
      "gender": "m",
      "places": [{
          "name": "London",
          "contacts": [{
              "type": "phone",
              "value": "123456789"
          },{
              "type": "email",
              "value": "johnsmith@example.com"
          }]
        },{
          "name": "Paris",
          "contacts": [{
              "type": "phone",
              "value": "987654321"
          }]
        }]
    },{
      "firstName": "Jane",
      "lastName": "Doe",
      "gender": "f",
      "places": [{
        "name": "Paris",
        "contacts": [{
            "type": "email",
            "value": "janedoe@example.com"
        }]
      }]
    }];
    
    $scope.getPlaces = function(places) {
      var cities = '';
      for (var i = places.length; i-- > 0;) {
        cities += places[i].name + '<br />';
      }
      console.log(cities);
      return cities;
    }

    $scope.getEmails = function(places) {
      var emails = '';
      for (var i = places.length; i-- > 0;) {
        for (var j = places[i].contacts.length; j-- > 0;) {
          if (places[i].contacts[j].type === 'email') {
            emails += places[i].contacts[j].value + '<br />'
          }
        }
      }
      console.log(emails);
      return emails;
    }

    $scope.getPhones = function(places) {
      var phones = '';
      for (var i = places.length; i-- > 0;) {
        for (var j = places[i].contacts.length; j-- > 0;) {
          if (places[i].contacts[j].type === 'phone') {
            phones += places[i].contacts[j].value + '<br />'
          }
        }
      }
      console.log(phones);
      return phones;	
    }    
}]);

td {
  vertical-align: top; 
  border: 1px solid #000;
  min-width: 100px;
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js"></script>
  <meta charset="utf-8">
  <title>Test</title>
</head>

<body ng-controller="testCtrl">
  <table>
    <tr>
      <th>Name</th>
      <th>Cities</th>
      <th>Emails</th>
      <th>Phones</th>
    </tr>
    <tr ng-repeat="person in persons">
      <td ng-bind="person.firstName + ' ' + person.lastName">
      <td ng-bind-html="getPlaces(person.places)">
      <td ng-bind-html="getEmails(person.places)">
      <td ng-bind-html="getPhones(person.places)">
    </tr>    
  </table>
</body>

</html>

这应该让您很好地了解从哪里开始。另外，请注意它需要 ngSanitize，因此如果您最终使用此方法，请确保包含它。

【讨论】：