AngularJS：ui网格使用过滤器在单元格中显示多行答案

【问题标题】：AngularJS :ui grid show multi lines in a cell using filterAngularJS：ui网格使用过滤器在单元格中显示多行
【发布时间】：2017-08-20 04:42:18
【问题描述】：

我无法在列中呈现新行。下面是我的代码。

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;
        }
    });

【问题讨论】：

如果你有嵌套括号，你需要阅读Remove Nested Patterns with One Line of JavaScript。你会看到你只需要while (value != (value = value.replace(/\s*\([^()]*\)/g, ""))); return value;
请在此处发布答案stackoverflow.com/questions/43114069/… 非常感谢！
我在下面的回答有帮助吗？你还需要什么吗？

标签： angularjs angular-ui-grid

【解决方案1】：

只是一些小的调整：

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>

如果您还有其他问题，请告诉我。

乐于助人！

【讨论】：