comment ajouter un champ dynamique au champ de nom d'en-tête ui-grid

Question

Grille ayant un nom de champ Les utilisateurs doivent indiquer Utilisateurs (nombre d'utilisateurs) dans le nom d'en-tête ui-grid. Comment puis-je obtenir cela. Ceci est mon code de fichier JS

var userCount= response.usercount; 

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

Comment puis-je obtenir?

Answer 1

Vous pouvez toujours modifier le texte de l'en-tête. On dirait que vous pouvez mettre une montre à la valeur de comptage et faire quelque chose de semblable à ce qui suit:

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

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

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

le code peut varier dans votre cas. Par exemple, vous pouvez regarder la modification de $ scope.data à la place et utiliser $ scope.data.length pour concaténer le displayName. Vous pouvez sélectionner l'en-tête et l'index sera 1 au lieu de 0, etc.

Mise à jour Réponse: avez-vous oublié d'injecter ui.grid et 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 
    /... 
}]);