为什么 angularjs(ng-repeat) 如果输入数组值是整数类型，则允许在第一次添加重复记录

Question

片段 1：

如果你运行这个下面的代码，那么你不能添加重复的记录。

var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["1", "2", "3"];
  $scope.addItem = function() {
    $scope.products.push($scope.addMe);
  }
});

<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
</head>
<body>
    <div ng-app="myShoppingList" ng-controller="myCtrl">
      <ul>
        <li ng-repeat="x in products">{{x}}</li>
      </ul>
      <input ng-model="addMe">
      <button ng-click="addItem()">Add</button>
    </div>
    <p>Write in the input field to add items.</p>
  </body>
</html>

上面的代码片段为

抛出错误

"[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: x in products, Duplicate key: string:1, Duplicate value:

片段 2：

但是如果您运行下面的代码片段，您可以在 第一次 添加重复值。但是不允许在点击第二次时添加重复值。

var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = [1, 2, 3];
  $scope.addItem = function() {
    $scope.products.push($scope.addMe);
  }
});

<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
</head>
<body>
    <div ng-app="myShoppingList" ng-controller="myCtrl">
      <ul>
        <li ng-repeat="x in products">{{x}}</li>
      </ul>
      <input ng-model="addMe">
      <button ng-click="addItem()">Add</button>
    </div>
    <p>Write in the input field to add items.</p>
  </body>
</html>

片段代码差异：

片段 1 - $scope.products = ["1", "2", "3"]; // 字符串值

片段 2 - $scope.products = [1, 2, 3]; // 整数值

问题：

如果数组值为 string，为什么 angular 不允许在 第一次 上添加重复值？
为什么 angular 允许在 第一次 上添加重复值，如果数组值为 integer
如果数组值为 integer

第二次出现重复值

Answer 1

因为默认输入类型是文本，所以是字符串，所以数字2不等于字符串“2”

如果您在输入中添加类型编号

<input type="number" ng-model="addMe">

在您的第二个示例中，您会看到它不允许重复输入

var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = [1, 2, 3];
  $scope.addItem = function() {
    $scope.products.push($scope.addMe);
  }
});

<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
</head>
<body>
    <div ng-app="myShoppingList" ng-controller="myCtrl">
      <ul>
        <li ng-repeat="x in products">{{x}}</li>
      </ul>
      <input type="number" ng-model="addMe">
      <button ng-click="addItem()">Add</button>
    </div>
    <p>Write in the input field to add items.</p>
  </body>
</html>

Answer 2

Angular 需要跟踪转发器中的数组项。如果未指定按字段跟踪，则它通过创建数组项的散列来跟踪。

根据以上问题的答案如下

Why angular does not allowing to add duplicate value on first time if the array values are string?

它为重复值创建相同的散列 - 因此，错误

Why angular is allowing to add duplicate value on first time if the array values are integer

因为当您再次输入时，它被视为一个字符串，因此具有不同的哈希值。

Why angular does not allow duplicate value on second time if the array values are integer

因为第一个条目被视为字符串，因此第二个条目被视为重复项。

Answer 3

我调试了代码，发现以下几点

当您从输入框中添加值时，它会将其视为字符串，而不是数字。

第一种情况

It contains a list of strings. Consider you try adding 3. It treat the input as "3" which is already present, hence it gives error.

以秒为单位

You have an array of numbers. When when you first time insert an item say 3, it will get added as a string. So 3(integer) is not the same as "3"(string).

为什么 angularjs(ng-repeat) 如果输入数组值是整数类型，则允许在第一次添加重复记录

Why angularjs(ng-repeat) allowing to add duplicate record at first time if the input array values are integer types

html

javascript

arrays

angularjs

angularjs-ng-repeat

片段 1：

片段 2：

片段代码差异：

问题：