Question

以下是否可行？如果可以，我如何更改HTML以允许它？

我有以下型号;

prospect = [{"name":"jamie",
             "phones": [{
                         "type":"home",
                         "number":"01275"},
                        {
                         "type":"mobile",
                         "number":"0788"}]},
            {"name":"peter",
             "phones": [{
                         "type":"mobile",
                         "number":"07852"}]}
           ]

我希望在angularjs表中显示 - 就像这样

name  home  mobile
jamie 01275 0788
peter       07852

我目前的HTML

<table>
        <tbody ng-repeat='person in prospect'>
        <th>Name</th>
        <th ng-repeat="phone in person.phones">{{phone.type}}</th>
        <tr>
        <td>
        {{person.name}}
        </td>
            <td ng-repeat='phone in person.phones'>
                {{phone.number}}
            </td>
        </tr>
        </tbody>
    </table>

产生

Name    home    mobile
jamie    01275   0788
Name    mobile
peter    07852

http://jsfiddle.net/jaydubyasee/D7f2k/

Answer 1

要在html中执行此操作，而不修改json，我首先添加一个数组，指示每列中哪种类型的手机：

$scope.types= ["home","mobile"];

然后在标题中使用它：

<th ng-repeat="type in types">{{type}}</th>

然后打印出我们在每列中的每部手机上重复的电话号码，使用ngIf有条件地显示与该列类型匹配的任何手机：

<td ng-repeat='type in types'>
    <span ng-repeat='pphone in person.phones' ng-if="pphone.type == type">
       {{pphone.number}}
    </span>           
</td>

updated fiddle

一种变体是用自定义指令替换嵌套的ngRepeat，该指令显示给定列和行的正确电话。

Answer 2

我希望你会喜欢这个解决方案：）

我为你做了这个依赖

bower install angular
bower install ng-tasty
bower install bootstrap

这里是完整的解决方案

  <div tasty-table bind-resource="resource">
    <table class="table table-striped table-condensed">
      <thead tasty-thead></thead>
      <tbody>
        <tr ng-repeat="row in rows">
          <td ng-bind="row.name"></td>
          <td ng-bind="row.phones | filterTypeColumn:'home'"></td>
          <td ng-bind="row.phones | filterTypeColumn:'mobile'"></td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/ng-tasty/ng-tasty-tpls.min.js"></script>
  <script>
    angular.module('stackOverflowAnswer', ['ngTasty'])
    .filter('filterTypeColumn', function() {
      return function (input, typeColumn) {
        var phoneNumber;
        input.forEach(function (phone) {
          if (phone.type === typeColumn) {
            phoneNumber = phone.number;
          }
        })
        return phoneNumber;
      };
    })
    .controller('StackOverflowController', function ($scope) {
      $scope.resource = {
        "header": [
          { "name": "Name" },
          { "home": "Home" },
          { "mobile": "Mobile" }
        ],
        "rows": [
          { 
            "name":"jamie",
            "phones": [
              { "type":"home","number":"01275" },
              { "type":"mobile", "number":"0788"}
            ]
          },
          {
            "name":"peter",
            "phones": [
              { "type":"mobile","number":"07852"}
            ]
          }
        ]
      };
    });
  </script>
</body>
</html>

如果您想了解更多有关ngTasty的信息，可以在http://zizzamia.com/ng-tasty/directive/table找到所有文档。对于您的具体情况，解决方案是制作自定义过滤器。

侨

灵活的表格重复

2 个答案: