我正在尝试执行以下操作:当您单击“添加包”时,它会将一个包推送到一个数组,我可以在其中指定例如包一,但在其中我想推送多个项目(产品)“添加项目”。问题是当我创建一个新包时它可以工作,但每个包中的项目是相同的,因此当我向任一动态包添加更多项目时,其中的项目是相同的。我认为这是因为数组每次都是相同的,如何通过索引跟踪它?
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:''
});
}
最佳答案
当然,包中的所有项目都是相同的,因为您在包内使用相同的内容数组:ng-repeat="ordercontent in orderproductscontents"
。如果我理解正确的话,您需要这个数组 orderproductscontents
在每个包中都是独特的。为此,请将此数组存储在包对象中,如下所示:
_this.addOrderPackage = function() {
_this.orderproductspackages.push({
ordernumber: _this.order.ordernumber,
contents: []
});
}
然后只是ng-repeat="ordercontent in orderpackage.contents"
关于javascript - Angular JS 多个 ngRepeat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45008093/