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

Question

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.

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'

What is {{sourceText}} wrapped in? A pre tag or something else? Basically you will need to split the string into the an array on the new line character. Then bind that to an appropriately styled list. — Jon P
– Jon P, Commented Dec 19, 2018 at 5:56

Kalaiselvan · Accepted Answer · 2018-12-19 06:13:30Z

1

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>

answered Dec 19, 2018 at 6:13

Kalaiselvan

2,1441 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Varun Sharma Over a year ago

Thanks for the answer. But I am not getting \n, Because \n converting into new in controller itself when I am fetching from DB

Kalaiselvan Over a year ago

so how do you know its going to be a next line, because its single line

Varun Sharma Over a year ago

When I am printing after call, It showing me in next line

Varun Sharma Over a year ago

You can check me new question for reference

Varun Sharma Over a year ago

can we put these line into the array

|

לבני מלכה · Accepted Answer · 2018-12-19 06:17:17Z

1

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>

edited Dec 19, 2018 at 6:17

answered Dec 19, 2018 at 5:56

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

1 Comment

Varun Sharma Over a year ago

Thanks for the comment. But it is not working for me, I am not getting \n in the controller, \n converting into next line itself

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related