如何将动态字段添加到ui-grid header-name字段

Question

具有一个字段名称的网格用户和要求是它应该在ui-grid header-name中显示用户（用户数）。我怎么能得到它。 这是我的JS文件代码

  var userCount= response.usercount;

      columnDefs: [{
                    name: 'Users', // Along with Users i want count also
                    width: '25%',                        
                    cellTemplate: 'beacon-template'
                },

我怎么能得到它？

Answer 1

您始终可以更改标题文字。听起来你可以把手表放在计数值上并做类似下面的事情：

$scope.$watch('yourCountValue', function(newVal){

  $scope.gridOptions.columnDefs[0].displayName = 'Users(' + newVal + ')';

  $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
})

代码可能会因您的情况而异。例如，您可以改为查看$ scope.data更改并使用$ scope.data.length来连接displayName。您可以选择标题，索引将为1而不是0，等等。

更新后的答案：您是否忘记注入ui.grid和uiGridConstants？

var app = angular.module('myApp', ['ui.grid']);

app.controller('appCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {

  $scope.gridOptions = {

    columnDefs: [
        {field: 'field1', displayName: 'User 1'},
        {field: 'field2', displayName: 'User 2'},
    ],

    data: [
      { field1: "user 1", field2: "bar"},
      { field1: "user 2", field2: "bar"},
      { field1: "user 3", field2: "bar"}
    ],

    onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
    }
    };
    //put the watch here
    /...
}]);