2017-07-10 17 views
0

私は次のことをやろうとしています: "Add Package"をクリックすると、配列にパッケージをプッシュします。 1つはパッケージ化しますが、その中で複数のアイテム(商品)を「アイテムを追加」したいです。問題は、新しいパッケージを作成しても動作しますが、各パッケージのアイテムは同じなので、いずれかの動的パッケージにアイテムを追加すると、同じアイテムが同じになります。配列は毎回同じなので、それをインデックスで追跡する方法はあると思いますか?Angular JS Multiple ngRepeat

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> 

コードスニペット:ng-repeat="ordercontent in orderproductscontents":もちろん

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

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

答えて

1

あなたは、パッケージ内部の同じ内容の配列を使用しているため、あなたのパッケージ内のすべての項目は、同じです。私があなたのことをよく理解していれば、このパッケージorderproductscontentsが各パッケージで区別される必要があります。

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

してからちょうどng-repeat="ordercontent in orderpackage. contents"

+0

優れたおかげユージンKrakos:このように、パッケージオブジェクトにこの店にこの配列を行うには –