Question

我有下表：

<table class="table main-table" ng-if="linesArray && linesArray.length > 0">
    <!-- HEADER-->
    <thead class="table-head">
        <tr>
            <th ng-repeat="column in ::columns" width="{{::column.width}}">{{::column.label}}</th>
        </tr>
    </thead>
    <!-- BODY -->
    <tbody>
        <tr ng-repeat="line in linesArray">
            <td ng-repeat="column in ::columns" width="{{::column.width}}" ng-class="{
          'center-text' : (!line[column.key] || line[column.key].length === 0)
        }">{{line[column.key] !== undefined ? line[column.key] : '--'}}
            </td>
        </tr>
    </tbody>
</table>

呈现如下所示：

我想要实现的目标：

要将两个单独字段的数据连接到第一列中的一个，它应该如下所示：

如您所见，该列显示具有特定格式的日期和时间。

操作表逻辑的指令：

function historicalSummaryTable($filter) {
    return {
        restrict: 'EA',
        link: link,
        templateUrl: 'jfrontalesru/app/components/historicalSummary/historicalSummaryTable.html',
        scope: {
            linesArray: "=",
            columns: "=",
            groupField: "@",
            groupFieldFilter: "@",
            groupFieldFilterFormat: "@"
        },
    };

    function link(scope, element, attrs) {
        var _groupField = 'groupField';
        var _subgroupField = 'subgroupField';

        scope.$watch('linesArray', function(value) {
            scope.linesArray.forEach(function(line) {
                // Applies the filter for every column if set
                scope.columns.forEach(function(column, index) {
                    // Applies the filter
                    if (column.filter && column.filter.length > 0) {
                        line[column.key] = $filter(column.filter)(line[column.key], column.format);
                    }
                });
            });
        });
    }
}

在这个指令中，输入日期数据被格式化，然后像这样传递给控制器。

  vm.historicalColumns = [
     {label: $translate('columnDateTime'), key: "timestamp",width:"18%", filter:"date",format:"mediumTime", group:false},
     {label: $translate('columnDetails'), key: "detail",width:"50%", group:false},
     {label: $translate('columnOrigin'), key: "origin",width:"17%", group:false},
     {label: $translate('columnUser'), key: "user",width:"15%", group:false}
];

我在这里很黑，因为我不知道该怎么做。

Answer 1

可以添加使用ng-if检查索引

的范围

 <td ng-repeat="column in ::columns" width="{{::column.width}}" ng-class="{
          'center-text' : (!line[column.key] || line[column.key].length === 0)
        }">
      <span ng-if="$index==0">first column only</span>
      {{line[column.key] !== undefined ? line[column.key] : '--'}}
</td>

或者将数据映射到控制器中并在那里进行连接

连接特定列中的数据

我想要实现的目标：

1 个答案: