自定义Ui-grid标头字段并启用排序

Question

我有一个UI网格，在第一列信标列中显示很少的细节我需要在标题文本中显示所有信标的计数以及信标（计数）。这个计数得到了服务的响应。

这是我的JS文件

     define([
'angular',
'./module',
'moment',
'select2'
  ], function(angular, module, moment, select2) {
'use strict';

module.controller('eventViewerSelectPanelController', [
    '$scope',
    '$translate',
    'messageBus',
    'toasty',
    '$filter',
    '$rootScope',
    '$q',
    'facilityDetails',
    'logger',
    '$interval',
    'filterStateService',
    'deviceStateService',
    '$timeout',
    'sensoryEventService',
    'scarletConsoleConfigService',
    function($scope, $translate, messageBus, toasty, $filter, $rootScope, $q, facilityDetails, logger, $interval, filterStateService, deviceStateService, $timeout, sensoryEventService, scarletConsoleConfigService) {


        var macRegex = /^([0-9A-F]{2}[:-]){5}([0-9A-F]{2})$/i;
        $scope.numberOfRecords = -1;
        filterStateService.resetFilter();

        var timestampColSortFun = function(a, b, rowA, rowB, direction){
            console.log(a, b, rowA, rowB, direction);
            return 1
        }

        $scope.loadSensoryEvents = function() {
            var query = filterStateService.getSearchQuery().trim();
            var deviceType = filterStateService.getActiveFilterState().toUpperCase();

            var macListQuery = query.split(',');
            var macList = [];
            var errorMsg = '';

            for(var item of macListQuery){
                if(item != ''){
                    if(item.search(macRegex) > -1){
                        macList.push(item);
                    } else {
                        errorMsg = 'MAC not in valid format';
                        break;
                    }
                }
            }
            if(errorMsg === '' && macList.length < 1){
                errorMsg = 'Field is required.';
            }
            if(errorMsg === '' && macList.length > scarletConsoleConfigService.getConfig().eventMacMaxCount){
                errorMsg = 'MAC entered exceeds the max allowed count.'
            }
            if(errorMsg != ''){
                messageBus.send(Message.FilterPanelValidationFailed, errorMsg);
                return;
            }

            $scope.processing = true;
            console.log('duration', $scope.duration);
            var eventPromise = sensoryEventService.load(query, deviceType,$scope.duration);
            eventPromise.then(function(response) {
                console.log(response)
                var dataLength = response.sensoryEvents.length;
                $scope.numberOfRecords = dataLength;

                if(dataLength > 0){
                    $scope.gridOptions.data = processTimestamp(response.sensoryEvents);
      **// Here m getting the count in response**
                   $scope.count = response.beaconCount;
                     console.log("value of count is=====",$scope.count);                

                    $scope.receiverCount = response.receiverCount;
                    messageBus.send(Message.NumberOfSearchRecordsChanged, dataLength);
                }

                $scope.processing = false;
            }, function(error) {
                $scope.processing = false;
                console.error('error getting events');
                toasty.serviceError(error);
            });
        }


        $scope.gridOptions = {
            rowHeight: 60,
            multiSelect: false,
            enableColumnMenus: false,
            enableEdit: false,
            enableSoring: true,
            enableHorizontalScrollbar: 0,
            columnDefs: [{
                    name: 'beacon',  
            ****// Here M adding count to display Name****       
                    displayName:'Beacon(' +$scope.count + ')',
                    width: '25%',                     
                    cellTemplate: 'beacon-template'
                },
                {
                    name: 'receiver',                       
                    width: '25%',
                    headerCellTemplate: 'receiver-header-template',
                    cellTemplate: 'receiver-template'
                },
                {
                    name: 'storageTimestamp',
                    width: '30%',
                    displayName: 'Timestamps',
                    cellTemplate: 'timestamp-template'
                    // sortingAlgorithm: timestampColSortFun
                },
                {
                    name: 'rssi',
                    width: '7%',
                    displayName: 'RSSI',
                    cellTemplate: 'rssi-template'
                },
                {
                    name: 'beaconMajor',
                    width: '13%',
                    displayName:'Major/Minor',
                    cellTemplate:'major-minor-template'
                }
            ]
        };

        $scope.select2DurationSettings = {
            placeholder: 'Select',
            width: '125px',
            border: 'none',
            minimumResultsForSearch: 10
        };

        // Initialize select2 functionality after page loads
        $timeout(function() {
            $('#selectDuration').select2($scope.select2DurationSettings);
        }, 0);

        $scope.durations = [
            {
                key: 'label.duration.5',
                valueFrom: 0,
                valueTo: 5
            },
            {
                key: 'label.duration.15',
                valueFrom: 0,
                valueTo: 15
            },
            {
                key: 'label.duration.30',
                valueFrom: 0,
                valueTo: 30
            },
            {
                key: 'label.duration.60',
                valueFrom: 0,
                valueTo: 60
            },
            {
                key: 'lable.duration.last.1-2',
                valueFrom: 60,
                valueTo: 120
            },
            {
                key: 'lable.duration.last.2-3',
                valueFrom: 120,
                valueTo: 180
            },
            {
                key: 'lable.duration.last.3-4',
                valueFrom: 180,
                valueTo: 240
            }
        ];          

        $scope.duration = JSON.stringify($scope.durations[0]);

        function processTimestamp(items) {
            items.forEach(function(item, index) {
                item.timestampUI = moment(item.storageTimestamp).format('L');
                item.deviceTimestampUI = moment(item.deviceTimestamp).format('HH:mm:ss:SSS');
                item.gatewayTimestampUI = moment(item.gatewayTimestamp).format('HH:mm:ss:SSS');
                item.storageTimestampUI = moment(item.storageTimestamp).format('HH:mm:ss:SSS');
            });
            return items;
        }

        $scope.$onMessage(Message.SubmitFilterForm, function(event) {
            $scope.loadSensoryEvents();
        });         

        $(window).resize(function() {
            $scope.getTableHeight();
        });

        $scope.getTableHeight = function() {
            var height = $(window).height() - 160;
            return {
                height: (height) + "px"
            };
        };



    }
]);

  });

我已经附加了两个截图实际和预期的第二个预计将有一个计数未定义。锄头我可以得到数。请回复谢谢。 问题是网格在数据来自响应之前加载。怎么解决？