ng-repeat 响应缓慢答案

【问题标题】：ng-repeat is slow to respondng-repeat 响应缓慢
【发布时间】：2023-03-12 19:01:01
【问题描述】：

我有一个输入框，我试图将其绑定到一个 div。此 div 输出之前输入到输入框中的所有文本值，以空格分隔。

我的第一个问题是 angularjs 在输出输入框中的文本时响应缓慢。当我按空格键时，新元素不会弹出到dom中，直到我在输入框中输入一个新字符。
我遇到了这个 createNewTag 函数的一些奇怪错误，它不喜欢我连续输入多个空格。输入“错误数据”后，该工具将停止工作，并显示错误 - “错误：[ngRepeat:dupes]”。

希望这是一个有趣的！

谢谢。

function mainControllerCbk($scope) {
  $scope.tags = [];
  $scope.currentTag = "";
  $scope.createNewTag = function(event) {
    if (event.keyCode == 32) {
      $scope.tags.push($scope.currentTag);
      $scope.currentTag = "";
      $('#entrybox').val('');
    }
  };
  $('#entrybox').keyup($scope.createNewTag);
};

var app = angular.module('localApp', []);
app.controller('mainController', mainControllerCbk);

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body ng-app="localApp" ng-controller="mainController">
    <div>
      <input id="entrybox" data-ng-model="currentTag" />
      <div id="tagsCollection" ng-repeat="tag in tags">
        <span>{{tag}}</span>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

摆脱使用 jQuery。这不是创建角度应用程序的方法。强烈建议阅读thinking-in-angularjs-if-i-have-a-jquery-background
@charlieftl 谢谢，好文章。

标签： jquery angularjs frontend

【解决方案1】：

(i)第一个问题不是因为 ng-repeat，而是因为您使用 jquery 访问元素而不是进行双向数据绑定，通过调用 ng 将新元素添加到集合中-blur 指令以同样的方式失去焦点，

<input name="myInput" ng-blur="createNewTag()" ng-model="currentTag" required>
  <div id="tagsCollection" ng-repeat="tag in tags track by $index">
    <span>{{tag}}</span>
</div>

(ii)添加这个可以处理重复的元素，

<div id="tagsCollection" ng-repeat="tag in tags track by $index">

DEMO

【讨论】：

您能否详细说明您对 (i) 的回答？我尝试将 ng-model="tags" 添加到 #tagsCollection 元素，但这并没有解决问题。谢谢！
@Ian 查看演示
是的，确实如此。 win 的 ng-blur/controller 函数。