重複（ng-repeat）項目並讓用戶輸入每個項目的數量並提交AngularJs中的所有表單數據（現有重複項目+數量）

Question

根據標題，我的問題是：我該如何重複（ ng-repeat）預先選擇的項目，並讓用戶在以下步驟中輸入每個項目的數量，並在AngularJs中提交所有表單數據（現有重複項目+數量）？

我想也許可以將$index添加到正在重複的項目？或者可能有更好更簡單的解決方案，我錯過了。

這就是我想實現：
後，用戶選擇產品添加至報價（沒有額外的輸入，例如數量），所選的項目，然後在接下來的步驟重複的「報價「視圖，客戶必須能夠爲每個報價項目輸入數量。所有數據必須在客戶端點擊NEXT時發送到控制器。

我通過重複表單中的每個項目（但禁用不希望客戶混淆的數據）並輸入數量來實現以下功能。但是這樣做的結果顯然是爲一個項目輸入的數量將所有QTY設置爲相同的數量。此外，在ng-click="next(quoteFormData)"傳遞的數據，僅包含單數量值，而不是所有的數據：

<div class="container-fluid" ng-show="showQuote"> 
    <form name="createNewQuoteForm" method="post" action="" class="form-horizontal" role="form"> 
     <div class="form-group" ng-repeat="item in quote"> 
      <div class="row"> 
       <div class="col-md-3"> 
        <input ng-model="quoteFormData.productId" type="text" class="form-control" id="" name="" placeholder="{{item.productId}}" ng-disabled="true"> 
       </div> 
       <div class="col-md-4"> 
        <input ng-model="quoteFormData.productName" type="text" class="form-control" id="" name="" placeholder="{{item.productName}}" ng-disabled="true"> 
       </div> 
       <div class="col-md-3"> 
        <input ng-model="quoteFormData.supplierName" type="text" class="form-control" id="" name="" placeholder="{{item.supplierName}}" ng-disabled="true"> 
       </div> 
       <div class="col-md-2"> 
        <input ng-model="quoteFormData.qty" type="text" class="form-control" id="" name="" placeholder="0"> 
       </div> 
      </div> 
     </div> 
    </form> 
    <div class="container-fluid"> 
     <button class="btn btn-primary" ng-click="next(quoteFormData)" ng-show="showNext">Next</button> 
     <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
    </div> 
</div> 

我一直在使用一個表來重複數據，並具有輸入域也嘗試了類似的方法數量，但我沒有設法得到任何這樣發送的數據。

Answer 1

發表我的評論作爲答案（對於任何人在未來運行這個問題）。

而不是綁定quoteFormData屬性（ng模型）嘗試綁定項目（引用項目）。然後在去NG點擊：下一個（報價）

<div class="container-fluid" ng-show="showQuote"> 
<form name="createNewQuoteForm" method="post" action="" class="form-horizontal" role="form"> 
    <div class="form-group" ng-repeat="item in quote"> 
     <div class="row"> 
      <div class="col-md-3"> 
       <input ng-model="item.productId" type="text" class="form-control" id="" name="" placeholder="{{item.productId}}" ng-disabled="true"> 
      </div> 
      <div class="col-md-4"> 
       <input ng-model="item.productName" type="text" class="form-control" id="" name="" placeholder="{{item.productName}}" ng-disabled="true"> 
      </div> 
      <div class="col-md-3"> 
       <input ng-model="item.supplierName" type="text" class="form-control" id="" name="" placeholder="{{item.supplierName}}" ng-disabled="true"> 
      </div> 
      <div class="col-md-2"> 
       <input ng-model="item.qty" type="text" class="form-control" id="" name="" placeholder="0"> 
      </div> 
     </div> 
    </div> 
</form> 
<div class="container-fluid"> 
    <button class="btn btn-primary" ng-click="next(quote)" ng-show="showNext">Next</button> 
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
</div> 

Answer 2

我做我的實現略有不同，但我預期的結果將是相同的。我在form-group本身做了綁定，並簡單地將數量字段綁定到ng-model="item.qty"。另外，我通過quote提交form時：

<div class="container-fluid" ng-show="showQuote"> 
    <form name="createNewQuoteForm" method="post" action="" class="form-horizontal" role="form"> 
     <div class="form-group" ng-repeat="item in quote" ng-model="item"> 
      <div class="row"> 
       <div class="col-md-3"> 
        <input type="text" class="form-control" id="" name="" placeholder="{{item.productId}}" ng-disabled="true"> 
       </div> 
       <div class="col-md-4"> 
        <input type="text" class="form-control" id="" name="" placeholder="{{item.productName}}" ng-disabled="true"> 
       </div> 
       <div class="col-md-3"> 
        <input type="text" class="form-control" id="" name="" placeholder="{{item.supplierName}}" ng-disabled="true"> 
       </div> 
       <div class="col-md-2"> 
        <input type="text" ng-model="item.qty" class="form-control" id="" name="" placeholder="0"> 
       </div> 
      </div> 
     </div> 
    </form> 
    <div class="container-fluid"> 
     <button class="btn btn-primary" ng-click="next(quote)" ng-show="showNext">Next</button> 
     <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
    </div> 
</div>