HTML页面解析后如何在源代码中放入行号？

Question

我正在使用 angular js 和 mongoDB，在 mongoDB 中我有一些带有 \n 的文本，所以每一行都基于 \n 进入新行，但我也想为每一行添加行号。

HTML 代码

{{sorceText}}

控制器代码

 $scope.sorceText=" ANB+IO:UI+OPO++7866:1111222'\OKP+JJJJ+PP++IOOIO:9989+KKKKKK+II+22:33'
 IIOI+IOIOOI+OOOO:13:1:IA+AA346+4'
 MSG+8'
 LLL+PLPL:MLML+52519950'
 NBK+290818:0000+MJL+LKL+OK+91'
 KWNN+250'
 NFR'
 KK+KK:MMM'"

现在显示：

     ANB+IO:UI+OPO++7866:1111222'\OKP+JJJJ+PP++IOOIO:9989+KKKKKK+II+22:33'
     IIOI+IOIOOI+OOOO:13:1:IA+AA346+4'
     MSG+8'
     LLL+PLPL:MLML+52519950'
     NBK+290818:0000+MJL+LKL+OK+91'
     KWNN+250'
     NFR'
     KK+KK:MMM'

预期我想添加每行的行号。

1. ANB+IO:UI+OPO++7866:1111222'\OKP+JJJJ+PP++IOOIO:9989+KKKKKK+II+22:33'
2. IIOI+IOIOOI+OOOO:13:1:IA+AA346+4'
3. 味精+8'
4. LLL+PLPL:MLML+52519950'
5. NBK+290818:0000+MJL+LKL+OK+91'
6. KWNN+250'
7. NFR'
8. KK+KK:MMM'

Answer 1

使用ol

See working code

在js中拆分成数组这个字符串。

$scope.items=$scope.sorceText.split('\n');

在 html 中对这个数组使用循环：

<ol>
  <li ng-repeat="item in items">{{item}}</li>
</ol>

Answer 2

对你有帮助

 var app=angular.module('myapp',[]);
 app.controller("myctrl",function($scope){
 $scope.sorceText="ANB+IO:UI+OPO++7866:1111222'\OKP+JJJJ+PP++IOOIO:9989+KKKKKK+II+22:33'\nIIOI+IOIOOI+OOOO:13:1:IA+AA346+4'\nMSG+8'\nLLL+PLPL:MLML+52519950'\nNBK+290818:0000+MJL+LKL+OK+91'\nKWNN+250'\nNFR'\nKK+KK:MMM'"
 
 $scope.sorceText_arr=[];
 var arr=$scope.sorceText.split("\n");
 $scope.sorceText_arr=arr;
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myapp" ng-controller="myctrl">
         <div ng-repeat="i in sorceText_arr">
         <div>{{$index+1}} - {{i}}</div>
         </div>
</div>