Question

我对angularjs很新。我遇到了这个问题。我已经在几个问题中找到了它，但是没有人对我有益，因为我使用了$ index的跟踪，但没有和我合作任何人都可以帮助我

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>

这是我的控制器，我正在填写我的清单

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]);

                            }
                            }

Answer 1

尝试使用track by product.id。

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

Answer 2

我真的不知道你为什么用这种方式创建一个列表并尝试对它应用ng-repeat，但我想以下代码工作正常而没有重复问题

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>

'不允许在转发器中复制。跟踪$ index无效

2 个答案: