AngularJS: la grille de l'interface utilisateur affiche plusieurs lignes dans une cellule à l'aide du filtre

Question

Je ne parviens pas à afficher de nouvelles lignes dans la colonne. Voici mon code.

tests = "TC2148 (test1),TC2150 (test2),TC2149 (test3)"; 

    { field:'tests', displayName:'TestID's', cellTooltip: true, minWidth:110, visible: true , cellFilter : 'filterTests:this' } 

    testApp.filter('filterTests',function(){ 
     return function(value){ 
      value = value.replace(/ *\([^)]*\) */g, "") 
            .replace(/,/g,"\n"); 
      return value; 
     } 
    }); 

Answer 1

Juste quelques petits coups secs:

var testApp = angular.module('testApp', ['ui.grid', 'ngSanitize']); 
 
testApp.controller('MainCtrl', ['$scope', '$sce', function($scope, $sce) { 
 
    var tests = "TC2148 (test1),TC2150 (test2),TC2149 (test3)"; 
 
    $scope.gridOptions = { 
 
    rowHeight: 80, 
 
    columnDefs: [{ 
 
     field: 'tests', 
 
     displayName: 'TestID\'s', 
 
     cellTooltip: true, 
 
     minWidth: 110, 
 
     visible: true, 
 
     cellTemplate: "<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\"><span ng-bind-html=\"grid.appScope.filter(COL_FIELD CUSTOM_FILTERS)\"></span></div>", 
 
    }], 
 
    data: [{ 
 
     tests: tests 
 
    }] 
 
    } 
 
    $scope.filter = function(value) { 
 
    return value.replace(/ *\([^)]*\) */g, "") 
 
     .replace(/,/g, "<br>"); 
 
    }; 
 
}]);

div[ui-grid] { 
 
    height: 140px; 
 
    width: 150px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-sanitize.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" /> 
 
<div ng-app="testApp" ng-controller="MainCtrl"> 
 
    <div ui-grid="gridOptions"> 
 
    </div> 
 
</div>

Laissez-moi savoir si vous avez d'autres questions.

Heureux de vous aider!