时间戳

首页 > 解决方案 > AngularJS 中带有 ng-repeat 的动态数据标题

javascript - AngularJS 中带有 ng-repeat 的动态数据标题

问题描述

我正在寻找一种解决方案来在角度表中显示动态标题，因为<td> 我的一些数据看起来像

let data = [    
    {
    id: 1,
    name: 'name',
    fields: {
    field 1: { value: '123'},
    field 2: {value: 'macx'}
    }
    },
    {
    id: 2,
    name: 'name2',
    fields: {
    field 1: { value: '456'},
    field 2: {value: '3333'}
    }
    }
]

它应该显示在一个表中，我的意思是字段 attr 应该在同一个表中显示为额外的列 注意：字段是动态的，我不能确切知道它所以我需要在代码中做这样的事情，如果我知道如何得到该工作或任何其他想法以获得解释的视图

<tr ng-repeat="data in $data">
    <td data-title="'id'|translate"
        sortable="'id'">
    {{data.id}}
    </td>
    <td ng-repeat="(key, value) in data.fields track by $index"
        ng-show="columnsHash[key]"
        data-title="customFieldsTitles[$index]"
        filterable="{field:'fields', type:'text', align:'LEFT'}"
        data-title-text="customFieldsTitles[$index]">
      {{value && value.value || ''}}
    </td>
    <td ng-show="columnsHash.totalBenefitTarget"
        data-title="'target_total_benefit' | translate"
        sortable="'total_benefit_target'"
        style="text-align:center;"
        filterable="{field: 'total_benefit_target', type:'number_range', options: {min:  Number.MIN_VALUE, max: Number.MAX_VALUE}}">
      {{data.total_benefit_target | number: 0}}
    </td>
    <td ng-show="columnsHash.totalBenefitActual"
        data-title="'actual_total_benefit' | translate"
        sortable="'total_benefit_actual'"
        style="text-align:center;"
        filterable="{field: 'total_benefit_actual', type:'number_range',
        options: {min:  Number.MIN_VALUE, max: Number.MAX_VALUE}}">
      {{data.total_benefit_actual | number: 0}}
    </td>
<tr>

显示列顺序很重要，所以像上面的代码一样编写它提前谢谢

标签： javascriptangularjs

解决方案

angular table use scope.$column to render tb cols so I solved that by using scope binding 
<table ng-table="tableParams" ng-init="initTable()">
<td ng-repeat="(key, value) in data.fields"
                data-title="'Custom Field'"
                sortable="'fields'"
                filterable="{field:'fields', type:'text', align:'LEFT'}">
              {{value && value.value || ''}}
 </td>
</table>

in controller
    var tableColumns;
    $scope.initTable = function(){
      var scope = this;
      $timeout(function(){
        tableColumns = scope.$columns;
      });
    };
    after loading data for table call this function to update columns title
     function updateCustomFields(){
      var columnTemplate, index;
      var colCount = 0;
      if (!tableColumns) {
        return;
      }
      tableColumns.map(function(col, i){
        if (col.title() === 'Custom Field'){
          columnTemplate = col;
          index = i;
          tableColumns.splice(index, 1);
          return true;
        }
      });
      for(var fieldLabel in $scope.customFieldsHash){
        (function (label) {
          var column = angular.copy(columnTemplate);
          column.id = column.id+colCount/10;
          column.title = function(){ return label; };
          tableColumns.splice(index+colCount, 0, column);
          colCount++;
        })(fieldLabel);
      }
    }

推荐阅读