Как поместить номер строки в исходный код после разбора на 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. MSG + 8 '
4. LLL + PLPL: MLML + 52519950 '
5. NBK + 290818: 0000 + MJL + LKL + OK + 91'
6. KWNN + 250 '
7. NFR'
8. КК + КК: МММ '

Answer 1

тебе будет полезно

 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>

Answer 2

Использовать ol

См. Рабочий код

В js разбить для массива этой строки.

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

В html используйте цикл для этого массива:

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