AngularJS 1.5.8中为JSON过滤内容添加行号的问题

你可以通过两种实用方式实现这个需求：自定义过滤器（将行号嵌入JSON字符串），或者使用CSS计数器（样式层面添加行号），下面分别详细介绍：

方法一：自定义AngularJS过滤器（行号随内容一起输出） #

这种方法会把行号直接整合到JSON字符串里，适合需要复制带行号内容的场景。

1. 定义自定义过滤器 #

在你的AngularJS模块中添加一个依赖内置json过滤器的自定义过滤器：

angular.module('yourAppName')
.filter('jsonWithLineNumbers', ['$filter', function($filter) {
  return function(input, indentLevel) {
    // 先用内置json过滤器生成格式化的JSON字符串
    var formattedJson = $filter('json')(input, indentLevel);
    if (!formattedJson) {
      return '';
    }
    // 按换行符分割成单独的行
    var lines = formattedJson.split('\n');
    // 为每行添加行号，格式为「行号 | 内容」
    var numberedLines = lines.map(function(line, index) {
      return (index + 1) + ' | ' + line;
    });
    // 重新拼接成完整的带行号字符串
    return numberedLines.join('\n');
  };
}]);

2. 在模板中使用过滤器 #

把原来的json过滤器替换成自定义的jsonWithLineNumbers即可：

<pre id="previewArea"><code>{{ $ctrl.myObj | jsonWithLineNumbers : 4}}</code></pre>

方法二：使用CSS计数器（样式层面添加行号） #

这种方法不会修改JSON字符串本身，行号仅通过CSS渲染实现，适合不需要复制行号的场景，样式与内容分离更清晰。

1. 添加CSS样式 #

给你的previewArea容器添加以下CSS规则：

#previewArea {
  counter-reset: line-counter; /* 初始化行号计数器 */
  padding-left: 1.5em; /* 给行号预留显示空间 */
}

#previewArea code {
  display: block; /* 让每行单独占一行 */
}

#previewArea code::before {
  counter-increment: line-counter; /* 每行计数器自动+1 */
  content: counter(line-counter) " | "; /* 生成行号内容 */
  color: #666; /* 设置行号为灰色，区分主体JSON内容 */
  display: inline-block;
  width: 40px; /* 固定行号宽度，保证JSON内容对齐整齐 */
  margin-left: -1.5em; /* 向左偏移，对齐到pre容器左侧 */
  text-align: right;
}

2. 保持原有模板不变 #

不需要修改原来的模板代码，依然使用内置的json过滤器即可：

<pre id="previewArea"><code>{{ $ctrl.myObj | json : 4}}</code></pre>

两种方法对比 #

• 自定义过滤器：行号是内容的一部分，复制时会被一同复制；但如果后续要修改行号格式，需要调整JS代码。
• CSS计数器：样式与内容完全分离，修改行号样式只需调整CSS；复制JSON内容时不会包含行号，适合仅做展示的需求。

你可以根据自己的实际使用场景选择合适的方案~

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