Question

我有一个输入框，我试图绑定到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>

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响应缓慢

1 个答案: