AngularJS 1.7.9：如何在ng-repeat内拆分JSON字段的逗号内容

针对AngularJS 1.7.9中拆分字段值内逗号并生成独立<span>的需求，你可以通过**自定义过滤器+ng-bind-html**来实现，具体步骤如下：

1. 自定义拆分过滤器 #

创建一个AngularJS过滤器，负责将目标字符串按逗号拆分，并用<span>包裹每个拆分后的片段，同时处理HTML信任问题（避免AngularJS自动转义标签）：

angular.module('你的应用模块名').filter('splitWithSpan', ['$sce', function($sce) {
  return function(input, separator) {
    // 处理空值或非字符串情况
    if (!angular.isString(input)) return input || '';
    
    // 按逗号拆分字符串（可自定义分隔符）
    const parts = input.split(separator || ',');
    
    // 为每个片段包裹span标签，拼接成HTML字符串
    const htmlStr = parts
      .map(part => `<span class="split-cell-item">${part.trim()}</span>`)
      .join('');
    
    // 信任生成的HTML，允许页面渲染
    return $sce.trustAsHtml(htmlStr);
  };
}]);

2. 在ng-repeat中使用过滤器 #

在透视表的ng-repeat循环里，针对需要拆分的字段，用ng-bind-html调用过滤器：

<!-- 假设你的透视表单元格绑定的是data.G（对应JSON里的"G":"1,37.5"） -->
<tr ng-repeat="data in pivotTableData">
  <td ng-bind-html="data.G | splitWithSpan"></td>
  <!-- 其他单元格 -->
</tr>

3. 可选：添加样式优化显示 #

为拆分后的<span>添加样式，让每个片段更易区分：

.split-cell-item {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 6px;
  background-color: #f5f5f5;
  border-radius: 3px;
}

说明 #

• 过滤器会自动处理空值、非字符串输入，避免报错；
• 如果需要拆分其他分隔符，可在调用时传入第二个参数，比如data.G | splitWithSpan:';'；
• 必须使用ng-bind-html而非普通的{{}}，因为要渲染动态生成的HTML标签，$sce.trustAsHtml是AngularJS 1.x中信任HTML的标准方式。

内容的提问来源于stack exchange，提问作者bless