Question

我对表有一点挑战

以下是table

    <table>
      <thead>
        <th>Name</th>
        <th ng-repeat="value in drilldownReport.columns">
         {{ drilldownReport.columnNames[value] }}
        </th>
      </thead>
      <tbody>
        <tr ng-repeat="offer in drilldownReport.data">
          <td>{{ offer.criteria.id }}</td>
          <td ng-repeat="value in drilldownReport.columns">
            {{ drilldownReport.fixDisplay(offer.overall[value]) }}
          </td>
        </tr>
        <tr ng-repeat="offer in drilldownReport.childsNodes">
          <td>{{ offer.criteria.id }}</td>
          <td ng-repeat="value in drilldownReport.columns">
            {{ offer.overall[value] }}
          </td>
        </tr>
      </tbody>
    </table>

该数据来自控制器，如此

    .then(function (data) {
      vm.data = data;
      vm.data.map(function(items) {
        console.log(items.childs);
        vm.childsNodes = items.childs;
      });
    }

其中vm.data返回此objs数组

[  
   {  
      "type":"offer",
      "criteria":{  
         "type":"offer_id",
         "id":"55e8f8d43744b0cd38bfb6bd"
      },
      "overall":{  
         "cost_per_click":0,
         "offer_price":0
      },
      "childs":[  
         {  
            "type":"offer",
            "criteria":{  
               "type":"browser",
               "id":"Firefox"
            },
            "overall":{  
               "cost_per_click":0,
               "offer_price":0
            },
            "childs":[  
               {  
                  "type":"offer",
                  "criteria":{  
                     "type":"browser",
                     "id":"Firefox"
                  },
                  "overall":{  
                     "cost_per_click":0,
                     "offer_price":0
                  }
               },
               {  
                  "type":"offer",
                  "criteria":{  
                     "type":"browser",
                     "id":"Chrome"
                  },
                  "overall":{  
                     "cost_per_click":0,
                     "offer_price":0
                  },
                  "childs":[  
                     {  
                        "type":"offer",
                        "criteria":{  
                           "type":"browser",
                           "id":"Firefox"
                        },
                        "overall":{  
                           "cost_per_click":0,
                           "offer_price":0
                        }
                     },
                     {  
                        "type":"offer",
                        "criteria":{  
                           "type":"browser",
                           "id":"Chrome"
                        },
                        "overall":{  
                           "cost_per_click":0,
                           "offer_price":0
                        }
                     }
                  ]
               }
            ]
         },
         {  
            "type":"offer",
            "criteria":{  
               "type":"browser",
               "id":"Chrome"
            },
            "overall":{  
               "cost_per_click":0,
               "offer_price":0
            }
         }
      ]
   }
]

您可以看到childs具有与其父节点完全相同的属性（类型，条件和整体）。 childs是一个objs数组，在数组childs的每个对象中，有时你会看到childs为同一个对象，childs内可能是另一个childs等等，你明白了吗？就像一个childs的大链，我需要在表中呈现它。 childs的数量是无数的，有时可能只有1，有时甚至是40。

你推荐什么？

修改

以防万一你想知道列和columnNames

vm.columns = [
  "offer_price",
  "cost_per_click"
]

vm.columnNames = {
  "offer_price": "Offer Price",
  "cost_per_click": "CPC"
};

我看到this与我需要的相似，但我不知道如何将其改编为我的代码。

Answer 1

您可以创建指令并以递归方式调用

Element.html

<tr>
    <td>{{data.id}}</td>
    <td>{{data.value}}</td>
</tr>
<element ng-repeat="child in data.children" data="child"></element>

elementDirective.js

.directive('element', function() {
    restrict: 'E',
    templateUrl: 'path/Element.html',
    scope: {
        data: '='
    }
});

在您的主要HTML上：

<table>
    <tr><th> ... </th></tr>
    <element data="drilldownReport.data">
</table>

根据来自后端的子节点显示表行

1 个答案: