Angular - Add line number to teaxtarea without jQuery

Question

I am trying to add line number to a textarea and the only options that I found are based on jQuery, for exapmle. Is there a way to do it using angular only ot pure CSS/JS?

Thanks.

Answer 1

Sure, this shouldn't be a problem. One solution might be to use ng-repeat to create small line number divs next to the textarea. Something like this:

  <div class="line-numbers">
      <div ng-repeat="i in getNumber(number)">{{$index+1}}</div>
  </div>
  <div class="text-area">
    <textarea rows="5" cols="50"></textarea>
  </div>

And this in your controller:

  $scope.number = 5;
  $scope.getNumber = function(num) {
    return new Array(num);
  }

With some CSS to help them sit next to each other:

.line-numbers {
  display: inline-block;
  font-family: fixed-width;
  margin: 0px;
}

.text-area {
  display: inline-block;
  margin: 0px;
}

Good luck!