Angular - 在没有 jQuery 的情况下将行号添加到 textarea

【问题标题】：Angular - Add line number to teaxtarea without jQueryAngular - 在没有 jQuery 的情况下将行号添加到 textarea
【发布时间】：2016-12-28 01:34:45
【问题描述】：

我正在尝试将行号添加到textarea，而我发现的唯一选项是基于 jQuery，用于exapmle。有没有办法只使用angular 而不是纯 CSS/JS？

谢谢。

【问题讨论】：

如果您不想要 jQuery 答案（这绝对没问题），请不要使用 jQuery 标记您的问题。

标签： angularjs textarea

【解决方案1】：

当然，这应该不是问题。一种解决方案可能是使用 ng-repeat 在文本区域旁边创建小的行号 div。像这样的：

  <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>

这在你的控制器中：

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

使用一些 CSS 帮助他们坐在一起：

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

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

祝你好运！

【讨论】：