À l'aide d'une fonction dans la cellule modèle

Je suis en utilisant angularjs avec de l'interface utilisateur-réseau. Une colonne de la grille contient un horodatage qui je tiens à rendre un correctement formaté date.

Jusqu'à maintenant, j'ai essayé comme ça, mais la fonction n'est jamais appelée.

  $scope.formatDate = function(date) {
    return '42';
  };

  $scope.columns = [
    {field: 'date', cellTemplate: '<div class="ui-grid-cell-contents">formatDate({{row.entity.date}})</div>'},
    {field: 'title'},
    {field: 'quantity'},
    //[...]
  ];

Au lieu de cela, l'appel de fonction est considérée comme une chaîne littérale. En conséquence, la colonne affiche toujours formatDate(*timestamp*).

J'ai seulement trouvé un non-satisfaction de façon de l'atteindre par la définition d'une fonction sur chaque ligne unique lors de leur réception :

  $scope.columns = [
    {field: 'getFormattedDate()'},
    //[...]
  ];

  $http.post('/api/data/').success(function (data) {
    $scope.gridOptions.data = data.elements;

    $scope.gridOptions.data.forEach(function(row) {
      row.getFormattedDate = function() {
        return '42';
      }
    })
  });

Meilleure suggestion?

Avez-vous essayé le filtre de date?
n'utilisez pas de {{}} sur le champ d'application de la fonction de variables
Oui, la date de filtre fonctionne très bien. Désolé, mais la question est fait pour être plus général que "comment analyser une date". Je voudrais être en mesure d'appeler une méthode pour les autres colonnes qui contient autre chose que des dates.
J'ai essayé, mais l'expression entière est considérée comme une Chaîne. Ensuite, la grille affiche formatDate(row.entity.date) dans toutes les cellules 😀
ce que vous êtes à la recherche pour?

OriginalL'auteur Arnaud Denoyelle | 2015-10-12

  1. 17

    Si vous souhaitez accéder au contrôleur de niveau d'étendue des fonctions à l'aide ui-grid vous pouvez utiliser grid.appScope, voici un exemple rapide:

    {
    name: 'date',
    cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseDate(row.entity.date)}}</div>'
}

    Exemple Complet:

    angular.module('myApp', ['ui.grid'])
    .controller('myCtrl', ['$scope', function ($scope) {

    $scope.parseDate = function (p) {
        //Just return the value you want to output
        return p;
    }

    $scope.parseName = function (p) {
        //Just return the value you want to output
        return p;
    }

    $scope.gridOptions = {
        data: [{
            name: "Foo",
            date: "2015-10-12"
        }, {
            name: "Bar",
            date: "2014-10-12"
        }],
        columnDefs: [{
            name: 'name',
            cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseName(row.entity.name)}}</div>'
        }, {
            name: 'date',
            cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseDate(row.entity.date)}}</div>'
        }]
    };
}]);

    Violon Exemple

    Cela fonctionne bien mais lorsque je suis en train de retourner un élément de sa ne fonctionne pas. Comment pouvons-nous retourner un inline HTML? Ici, je suis en train d'essayer de Montrer bouton personnalisé sur en-tête de Groupe lavel en utilisant cellTemplate.
    Si vous souhaitez utiliser le html dans AngularJS vous devez utiliser ngBindHtml et ngSanitize mais, ma compréhension est que ngSanitize ne permet pas des éléments de formulaire HTML, il leur enlève. Dans cet exemple, vous pouvez voir comment les éléments d'entrée sont supprimés et la div est permis
    Violon lien mort
    En supposant que tu veux dire le lien dans la réponse, il est fixe. Merci.

    OriginalL'auteur jnthnjns

  2. 4

    Utiliser la fonction de sortie de l'ensemble de l'appel de fonction, et non les arguments , doivent être enveloppé dans l'expression des accolades

    <div class="ui-grid-cell-contents">{{ formatDate(row.entity.date) }}</div>
    Les cellules sont rendus vide. Un console.log() dans $scope.formatDate montre que la fonction n'est pas appelée. Mais je ne vois pas d'erreurs dans la console.
    créer une directive , de la portée à l'intérieur de la grille ne sera pas le contrôleur de la portée
    Vous avez besoin d' {{ grille.appScope.formatDate(rangée.de l'entité.date) }}

    OriginalL'auteur charlietfl

  3. 0

    Il est intéressant de noter que la cellTemplate ne fera rien si vous n'incluez pas le HTML dans le format:

    ne frappera pas la méthode de formatage "formatRating()":

                columnDefs: [
            {
                name: 'starRating', headerCellClass: 'blue', headerTooltip: 'Star Rating',
                cellTemplate: '{{grid.appScope.formatRating(row.entity.starRating)}}'
            },

    Travaille avec l'ajout d'un <span> dans le cellTemplate:

                columnDefs: [
            {
                name: 'starRating', headerCellClass: 'blue', headerTooltip: 'Star Rating',
                cellTemplate: '<span>{{grid.appScope.formatRating(row.entity.starRating)}}</span>'
            },

    ma méthode format:

            $scope.formatRating = function (starRating) {
        switch (starRating) {
            case "ONE": return "1/5"; break;
            case "TWO": return "2/5"; break;
            case "THREE": return "3/5"; break;
            case "FOUR": return "4/5"; break;
            case "FIVE": return "5/5"; break;
        }
    }

    OriginalL'auteur Adam Hey