AngularJS ng-repeat稍微慢一点更新

AngularJS ng-repeat slightly slow updating

本文关键字：慢一点 更新 ng-repeat AngularJS      更新时间：2023-09-26

>我正在尝试使用 Angular 的 ng-repeat 指令为 textarea 元素创建一个行号系统。本质上，使用 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>

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

演示

相关文章：