Question

所以我尝试根据api请求的响应在datatables中生成列。

    $scope.getProductCustomFields = function() {
                    $scope.custom_fields_loading = true;
                    $scope.dtCustomFieldsInstance = {};
                    $scope.dtCustomFieldsOptions = DTOptionsBuilder.newOptions().withOption('order', []);
                    $scope.dtCustomFieldsOptions.withOption('ajax', {
                        headers: {'Authorization': 'Basic ' + $rootScope.globals.currentUser.api_token},
                        dataSrc: 'data',
                        url: API.returnUrl('/ecommerce/reports/get-product-custom-fields?' + $httpParamSerializer({product: $scope.product})),
                        type: 'GET'
                    })
                        .withOption('processing', true)
                        .withOption('serverSide', true)
                        .withPaginationType('full_numbers')
                        .withOption('createdRow', createdRow);



function createdRow(row, data, dataIndex) {
                    // Recompiling so we can bind Angular directive to the DT
                    $compile(angular.element(row).contents())($scope);
                }
                $scope.dtCustomFieldsColumns = [];
    //Here I make another request to php within this function since I cannot actually use dataSrc: 'data' as array            
     ProductsReportsService.getProductCustomFields($scope.product).then(function (response) {
                        $scope.data = response.data.data;
                        angular.forEach($scope.data, function (value, key) {
                            $scope.dtCustomFieldsColumns.push(DTColumnBuilder.newColumn('value.value').withTitle(key).notSortable());
                        });
                    });
                    $scope.custom_fields_loading = false;
                };

正如你所看到的那样，我发出了两个请求，一个数据无法访问的ajax，另一个我评论过的请求，我用于我的forEach。

数据如下所示：

array:1 [
  "test drop down" => array:2 [
    0 => array:4 [
      "id" => 1
      "label" => "test drop down"
      "value" => "test1"
      "name" => "test drop down"
    ]
    1 => array:4 [
      "id" => 1
      "label" => "test drop down"
      "value" => "test2"
      "name" => "test drop down"
    ]
  ]

所以简单地说，我试图完成的是基本上看起来像这样的表：

<table>
  <thead>
     <tr>
        <th>test drop down</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>test1</td>
     </tr>
     <tr>
         <td>test2</td>
     </tr>
  </tbody>
</table>

现在我的表只有正确的标题，但表格中没有数据。

    <table>
      <thead>
         <tr>
            <th>test drop down</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td></td>
         </tr>
         <tr>
             <td></td>
         </tr>
      </tbody>
    </table>

感谢您的时间和帮助！

Answer 1

不确定这是你正在寻找的，但是从给定的数据集中显示这样的表（假设它保存在$scope.dtCustomFieldsColumns中）将是这样的：

<tbody>
   <tr ng-repeat="column in dtCustomFieldsColumns.testdropdown">
      <td>{{column.value}}</td>
   </tr>
</tbody>

您应该将数据集中的test drop down密钥更改为testDropDown。这将帮助您直接访问列。祝你好运。

带有角度数据表的动态列

1 个答案: