'Duplicates in a repeater are not allowed. track by $index not working

0
votes

I'm stil new with angularjs. I got this problem. I have found it in several questions but no one was beneficial for me because I used track by $index as mentionned but didnt work with me Can anyone help me please

html:

<table>
                <tbody>
                    <tr class="main-heading">
                        <th>Images</th>
                        <th class="long-txt">Product Description</th>
                        <th>Numero de serie</th> 
                        <th>Price</th>
                        <th>Total</th>
                    </tr>
                    <tr class="cake-bottom" data-ng-repeat="product in chosenPdtByQte track by $index">
                        <td class="cakes">
                            <div class="product-img2"></div>
                        </td>
                        <td class="cake-text">
                            <div class="product-text">
                                <h3>{{product.nameProduct}}</h3>
                                <p>Product Code: {{product.numserie}}</p>
                            </div>
                        </td>
                        <td ng-init="fetchNumSerie(product.id)">
                        <select name="singleSelect" ng-model="selecteOperation" ng-options="pdt as pdt.id for pdt in numSeries" >
                </select> 



                        </td>

                        <td>
                            <h4>{{product.price}}</h4>
                        </td>

                        <td class="top-remove">
                            <h4>{{product.price*quantite[product.id]}}</h4>
                            <div class="close-btm">
                                <h5>Remove</h5>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

And here is my controller where I am fulling my list

for (var i =0; i< $scope.chosenProducts.length; i++)
                            {
                            console.log(" lllll "+$scope.chosenProducts[i].quantite +"  "+$scope.quantite[$scope.chosenProducts[i].id]);
                            for (var j=0; j<$scope.quantite[$scope.chosenProducts[i].id]; j++)
                                {

                               $scope.chosenPdtByQte.push($scope.chosenProducts[i]);

                            }
                            }
2
angularjs
Are you sure it's the ng-repeat causing the problem? ng-options will throw the same duplicates in a repeater are not allowed error, so maybe you should double check that numSeries is unique. – Scott
Im sure because I m getting this problem before even using ng-options – yeddez
Could you provide a fiddle or similar to see what's is going on? – Jordi Ruiz
What means track by $index is not working? What is the result when you try it? – kabaehr

2 Answers

0
votes

Try to use track by product.id.

<tr class="cake-bottom" 
 data-ng-repeat="product in chosenPdtByQte track by product.id">
......
</tr>
0
votes

I don't really know why you created a list using that way and try to apply ng-repeat on it, but I guess the following code is working fine without duplicates problem

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.chosenProducts = [{
      "id": 1,
      "nameProduct": "testA",
      "numserie": "xx-ff-gg-ss",
      "price": 20
    }, {
      "id": 2,
      "nameProduct": "testB",
      "numserie": "yy-ee-gg-ss",
      "price": 30
    }, {
      "id": 3,
      "nameProduct": "testC",
      "numserie": "xx-ss-gg-ss",
      "price": 40
    }, {
      "id": 4,
      "nameProduct": "testD",
      "numserie": "xx-ff-ff-ss",
      "price": 50
    }, {
      "id": 5,
      "nameProduct": "testE",
      "numserie": "xx-ff-11-ss",
      "price": 60
    }, {
      "id": 6,
      "nameProduct": "testF",
      "numserie": "xx-ff-dd-ss",
      "price": 70
    }];

    $scope.quantite = [
      4, 5, 6, 7, 8, 9
    ];

    $scope.chosenPdtByQte = [];

    for (var i = 0; i < $scope.chosenProducts.length; i++) {
      for (var j = 0; j < $scope.quantite[$scope.chosenProducts[i].id]; j++) {
        $scope.chosenPdtByQte.push($scope.chosenProducts[i]);
      }
    }
    console.log($scope.chosenPdtByQte);
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <table>
    <tbody>
      <tr class="main-heading">
        <th>Images</th>
        <th class="long-txt">Product Description</th>
        <th>Numero de serie</th>
        <th>Price</th>
        <th>Total</th>
      </tr>
      <tr class="cake-bottom" data-ng-repeat="product in chosenPdtByQte track by $index">
        <td class="cakes">
          <div class="product-img2"></div>
        </td>
        <td class="cake-text">
          <div class="product-text">
            <h3>{{product.nameProduct}}</h3>
            <p>Product Code: {{product.numserie}}</p>
          </div>
        </td>
        <td ng-init="fetchNumSerie(product.id)">
          <select name="singleSelect" ng-model="selecteOperation" ng-options="pdt as pdt.id for pdt in numSeries">
          </select>
        </td>

        <td>
          <h4>{{product.price}}</h4>
        </td>

        <td class="top-remove">
          <h4>{{product.price*quantite[product.id]}}</h4>
          <div class="close-btm">
            <h5>Remove</h5>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>