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

Posted 2023-05-07

【中文标题】Angular - 在没有 jQuery 的情况下将行号添加到 textarea

【英文标题】：Angular - Add line number to teaxtarea without jQuery

【发布时间】：2016-12-28 01:34:45

【问题描述】：

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

谢谢。

【问题讨论】：

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

【参考方案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;

祝你好运！