ng-repeat 响应缓慢

Question

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

我的第一个问题是 angularjs 在输出输入框中的文本时响应很慢。当我按下 space 栏时，新元素不会弹出到 dom 中，直到我在输入框中输入一个新字符。
我在这个 createNewTag 函数中遇到了一些奇怪的错误，它不喜欢我连续输入多个 space。输入 'bad data' 后，工具将停止工作，并显示错误 - "Error: [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>

Answer 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

ng-repeat 响应缓慢

ng-repeat is slow to respond

jquery

frontend

angularjs