javascript - AngularJS ng-repeat更新速度稍慢

我正在尝试使用Angular的textarea指令为ng-repeat元素创建行编号系统。本质上，使用ng-keyup事件，我正在调用函数updateLineNumbers()，该函数计算textarea中的行总数，并在需要时添加到附加到$scope的行号数组中。

angular.module('editorApp')
.controller('LineNumberController', ['$scope', function($scope){
    $scope.lines = [1];
    $scope.updateLineNumber = function(){
        var text = $("#editor").val();
        var lines = text.split(/\r|\r\n|\n/);
        var count = lines.length;
        console.log(count);
        if(count > $scope.lines.length){
            console.log("adding line...");
            var len = $scope.lines.length;
            var linesToAdd = count - len;
            console.log("lines to add: " + linesToAdd);
            for(var i = 0; i < linesToAdd; i++){
                console.log('adding line number: ' + (i + $scope.lines[len - 1] + 1));
                $scope.lines.push(i + $scope.lines[len - 1] + 1);
            }
        }
    }
}]);

控制台日志语句仅用于调试目的。这工作正常，并且所有内容都显示了我想要的方式，但是我注意到它的速度稍慢。新的行号仅出现在光标后面，进入下一行。我知道它很挑剔，但是这让我感到困扰，我想知道在Angular中是否有解决方案，或者我应该只使用JQuery。

这是html代码：

<div class="main-editor" ng-controller="LineNumberController">
      <div class="line-numbers">
        <div ng-repeat="line in lines" id="line{{ $index + 1 }}">{{ $index + 1 }}</div>
      </div>
      <div class="editor-container">
        <textarea name="editor" id="editor" cols="30" rows="10" ng-keyup="updateLineNumber()"></textarea>
      </div>
    </div>

这是小矮人
http://plnkr.co/edit/0POJTx0p4rtfwOAaNRPb?p=preview

最佳答案

这是在ng-model上使用手表的更简单方法

重要的部分是使用ng-trim="false"，否则ng-model将在最后一个字符后修剪中断

  var lineCount = 1;
  $scope.$watch('model.editor', function(nV, oV) {
    if (!nV) {
      $scope.lines = [1];
    } else {
      var lines = nV.split(/\r|\r\n|\n/);
      // create new array if number of lines changed
      if (lines.length !== lineCount) {
        $scope.lines = lines.map(function(_, i) {
          return i + 1
        });
        lineCount = lines.length;
      }
    }
  });

视图

  <div class="line-numbers">
    <div ng-repeat="line in lines" id="line{{ $index + 1 }}">{{ line }}</div>
  </div>
  <div class="editor-container">
    <textarea name="editor" id="editor" cols="30" rows="10" ng-model="model.editor" ng-trim="false"></textarea>
  </div>

请注意，这在删除数据时也有效。

DEMO

关于javascript - AngularJS ng-repeat更新速度稍慢，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35528781/