CODEWITHSUNDEEP
javascripthtmlcssangularjs
Varun Sharma
Varun Sharma

Reputation: 4842

How to put line number in source code after parse in HTML page?

I am using angular js and mongoDB, In mongoDB I have some text with \n, So each line comes into the new line based on \n, But I am also want to add line number for each line.

HTML CODE

{{sorceText}}

Controller code

 $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'"

Displaying Now:

     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'

Expected I want to be add line number of each line.

  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. KK+KK:MMM'

Upvotes: 0

Views: 114

Answers (2)

לבני מלכה
לבני מלכה

Reputation: 16251

Use ol

See working code

In js split to array this string.

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

In html use loop on this array:

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

Upvotes: 1

Kalaiselvan
Kalaiselvan

Reputation: 2134

it will be helpful to you

 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>

Upvotes: 1

Related Questions