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

Posted 2023-03-05

技术标签:

【中文标题】如果输入数组值是整数类型，为啥 angularjs(ng-repeat) 允许在第一次添加重复记录【英文标题】：Why angularjs(ng-repeat) allowing to add duplicate record at first time if the input array values are integer types如果输入数组值是整数类型，为什么 angularjs(ng-repeat) 允许在第一次添加重复记录 【发布时间】：2018-08-20 10:24:29 【问题描述】：

片段 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>

而上面的sn-p为

抛出错误

"[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：

但是如果你在 sn-p 下面运行它，你可以在第一次添加重复值。但它不允许在点击第二次时添加重复值。

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，为什么角度不允许在第一次添加重复值？如果数组值为integer，为什么角度允许在第一次添加重复值如果数组值为integer，为什么角度不允许第二次重复值

【问题讨论】：

【参考方案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>

【讨论】：

是的。这个声音很好听。但不管它是什么。 ng-repeat 应该检查它是否字符串值是一个数字。我认为这是ng-repeat中的一个小错误在我看来这不是一个错误，但它是错误的实现，因为在上面的例子中，一个字符串值被添加到整数数组中。【参考方案2】：

Angular 需要跟踪中继器中的数组项。如果未指定按字段跟踪，则通过创建数组项的哈希进行跟踪。

根据以上问题，您的问题的答案如下