Angular JS Multiple ngRepeat

Question

我正在嘗試執行以下操作：當您單擊“添加包”時，它會將一個包推入數組，我可以在其中指定一個包，例如，其中一個包，但是在其中我要推送多個項目（產品）“添加項目”。 問題是當我創建一個新的程序包時它可以工作，但是每個程序包中的項目都相同，因此當我向任一動態程序包中添加更多項目時，其中的項目都相同。 我認為那是因為每次數組都是相同的，如何通過索引跟蹤它？

HTML：

<div class="col-12 order-box" ng-repeat="orderpackage in orderproductspackages track by $index">
  <div class="col-12">
    <label for="name_{{$index}}">Package Name</label>
    <input type="text" ng-model="orderpackage.orderpackagename" name="name_{{$index}}" required>                                                 
  </div>
  <div class="col-12" ng-repeat="ordercontent in orderproductscontents track by $index">                       
    <div class="col-2">
      <label for="name_{{$index}}">Product</label>
      <select ng-model="ordercontent.ordercontentname" name="name_{{$index}}" ng-change="onProductChange(ordercontent.ordercontentname,$index)">
        <option ng-repeat="product in productResponse | orderBy:'productname'" value="{{product.productname}}">{{product.productname}}</option>
      </select>                                                                            
    </div>                                   
    <div class="col-2">
      <label for="name_{{$index}}">Quantity</label>
      <input type="text" ng-model="ordercontent.ordercontentquantity" name="name_{{$index}}" ng-keyup="onProductChange(ordercontent.ordercontentname,$index)" required>
    </div>                     
    <div class="col-2">
      <label for="name_{{$index}}">Price</label>
      <input type="text" ng-model="ordercontent.ordercontentprice" name="name_{{$index}}" ng-change="onPriceChange(ordercontent.ordercontentname,$index)" disabled required>                                                 
    </div>
    <div class="col-2">
      <label for="name_{{$index}}">Per {{ordercontent.ordercontentmeasurement}}</label>
      <input type="text" ng-model="ordercontent.ordercontentpriceper" name="name_{{$index}}" disabled required>                                                 
    </div>
    <div class="col-2">
      <label for="name_{{$index}}">Total</label>
      <input type="text" ng-model="ordercontent.ordercontenttotal" name="name_{{$index}}" required disabled>
    </div>
    <div class="col-2">
      <label for="name_{{$index}}">Options</label>
      <a class="button critical small" ng-click="removeOrderContent($index)"><span class="fa fa-minus"></span> Remove</a> 
    </div>                    
  </div>
  <div class="col-12 m20-top p15 text-center add-api" ng-click="addOrderContent()">
    <span class="fa fa-plus"></span> Add Item</a>
  </div>
</div>
<div class="col-12 m20-top p15 text-center add-api" ng-click="addOrderPackage()">
  <span class="fa fa-plus"></span> Add Package</a>
</div>

代碼片段：

_this.addOrderPackage = function() {
  _this.orderproductspackages.push({ ordernumber:_this.order.ordernumber });
}

_this.addOrderContent = function() {
  _this.orderproductscontents.push({                    
    ordercontentname:'',                   
    ordercontentquantity:'1',                 
    ordercontentprice:'',
    ordercontentpriceper:'',
    ordercontenttotal:''
  });
}

Answer 1

當然，包中的所有項目都是相同的，因為您在包內使用了相同的內容數組： ng-repeat="ordercontent in orderproductscontents" 。 如果我理解正確，則需要此數組orderproductscontents在每個包裝中都與眾不同。 為此，將此數組存儲在包對象中，如下所示：

_this.addOrderPackage = function() {
  _this.orderproductspackages.push({ 
    ordernumber: _this.order.ordernumber,
    contents: []
  });
}

然后只是ng-repeat="ordercontent in orderpackage. contents"