All geek questions in one place

Why angularjs (ng-repeat) allows you to add a repeating entry for the first time if the values ​​of the input arrays are integer types

Fragment 1:

  • If you run this code below, you will not be able to add duplicate entries.

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>
Run codeHide result

And the above snippet throws an error for

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

Fragment 2:

  • But you can add a duplicate value for the first time if you run this snippet below. But it does not allow adding duplicate values ​​by clicking a second time .

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>
Run codeHide result

Fragment code difference:

1 - $scope.products = ["1", "2", "3"];//

2 - $scope.products = [1, 2, 3];//

:

  • angular , string?
  • angular , integer
  • angular , integer
+4
3

, - , , 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>
Hide result
+1

Angular . , , .

:

angular , ?

- ,

angular ,

, , , , .

angular ,

, , .

+1

I debugged the code and found below points

When you add a value from an input field, it treats it as a string, not as a number.

In the first case

It contains a list of strings. Try adding 3. It treats the input as "3", which is already present, therefore, it gives an error.

In seconds

You have an array of numbers. When you first insert an element say 3, it will be added as a string. So 3 (integer) does not match "3" (string).

+1
source

Source: https://habr.com/ru/post/1694770/

More articles:


All Articles