帶有ng-repeat的動態多表單插入和每個表單都有動態文本框以獲取值

Question

我正在使用ng表單和ng-repeat動態表單插入並嘗試使用該表單中的文本框存儲多個動態值。 這裏是我的代碼：

Want to add Ingredients : <button ng-click="showIngredientForm = !showIngredientForm" ng-class="{'red' : showIngredientForm}">{[{toggleText}]}</button> 
<div ng-show="showIngredientForm"> 
    <div ng-repeat="formToAdd in formsToAdd" > 
     <ng-form name="productFieldForm" > 
      <div class="form-group"> 
       <label>Option Type</label> 
       <select name="ingredientName" ng-model="formToAdd.ingredientId" class="form-control"> 
        <option value="">Select Option Type Name</option> 
        <option ng-repeat="option in ingredientTypeList" value="{[{option._id}]}">{[{option.ingredientTypeName}]}</option> 
       </select> 
       <button ng-click="removeForm(formToAdd)" ng-if="formsToAdd.length > 1">Remove</button></div> 
      </ng-form> 
      <div ng-if="formToAdd.ingredientId"> 
       <div ng-repeat="itemToAdd in itemsToAdd" > 
        <div class="form-group"> 
         <ng-form name="userFieldForm" > 
          <table> 
           <td> 
            <label>Option Name</label> 
<input type="text" placeholder="Option Name" name="ingredientName" ng-model="itemToAdd.ingredientName" ng-pattern="/^[a-zA-Z ]{3,25}$/" class="form-control" autocomplete="off" ng-required="true" ng-change="verifyDuplicate()" /> 
<div class="validation_messages" ng-show="userFieldForm.$submitted || userFieldForm.ingredientName.$touched"> 
             <span ng-show="userFieldForm.ingredientName.$error.required">Option cannot be empty</span> 
             <span ng-show="!userFieldForm.ingredientName.$error.required && userFieldForm.ingredientName.$error.pattern && userFieldForm.ingredientName.$dirty">Option Name Samples Cookie,Saz Mora</span> 
            </div> 
            <div class='validation_messages' ng-if='itemToAdd.isDuplicate'> 
             <span>Duplicate Not Allowed</span> 
            </div> 
           </td> 
           <td> 
            <button ng-click="remove(itemToAdd)" ng-if="itemsToAdd.length > 1">Remove</button> 
           </td> 
          </table> 
         </ng-form> 
        </div> 
       </div> 
       <div> 
        <button class="validation_messages" ng-click="addNew()">Add new</button> 
       </div> 
      </div> 
    </div> 
    <div> 
     <button class="validation_messages" ng-click="addForm()">Add new Form</button> 
    </div> 
</div> 

對這個網站的角度控制器代碼如下：

$scope.itemsToAdd = [{ 
    ingredientTypeName: '' 
}]; 

$scope.formsToAdd = []; 

$scope.$watch('showIngredientForm', function(){ 
    $scope.toggleText = $scope.showIngredientForm ? 'No' : 'Yes'; 
    if($scope.showIngredientForm == true){ 
     $scope.items = []; 
     $scope.itemsToAdd = [{ 
      ingredientName: '', 
      ingredientPrice: '' 
     }]; 
    } 
}); 

$scope.addForm = function(formToAdd) { 
     $scope.formsToAdd.push({}); 
} 

$scope.remove = function(itemToAdd) 
{ 
    var index = $scope.itemsToAdd.indexOf(itemToAdd); 
    $scope.itemsToAdd.splice(index, 1); 
} 

$scope.addNew = function() { 

$scope.itemsToAdd.push({ 
    ingredientTypeName: '', 
    ingredientPrice: '' 
}) 

任何形式的幫助是值得歡迎的，因爲這將有助於我和其他的程序員太...

Answer 1

您在輸入類型中使用的對象爲ng-model，而不是使用具有多個鍵和像ng-model="itemToAdd.ingredientName[formToAdd.ingredientId]"這樣的值的對象，這將創建一個唯一的ID到ID並將輸入文本值分配給該鍵，這將避免重複在下一個表單域中具有相同的值。

添加track by以跟蹤列表中的對象，這將幫助我們創建新的ng-model對象鍵，同時添加新字段。

<div ng-repeat="formToAdd in formsToAdd track by formToAdd.ingredientId"> 
<div ng-repeat="itemToAdd in itemsToAdd track by $index"> 

和輸入字段改爲

<label>Option Name</label> 
<input type="text" placeholder="Option Name" name="ingredientName" ng-model="itemToAdd.ingredientName[formToAdd.ingredientId]" ng-pattern="/^[a-zA-Z ]{3,25}$/" class="form-control" autocomplete="off" ng-required="true" ng-change="verifyDuplicate()" /> 
    <div class="validation_messages" ng-show="userFieldForm.$submitted || userFieldForm.ingredientName[formToAdd.ingredientId].$touched"> 
    <span ng-show="userFieldForm.ingredientName[formToAdd.ingredientId].$error.required">Option cannot be empty</span> 
     <span ng-show="!userFieldForm.ingredientName[formToAdd.ingredientId].$error.required && userFieldForm.ingredientName[formToAdd.ingredientId].$error.pattern && userFieldForm.ingredientName[formToAdd.ingredientId].$dirty">Option Name Samples Cookie,Saz Mora</span> 
</div> 

下面是你的JS

$scope.itemsToAdd = [{ 
       ingredientName: {},//assign a new object everytime 
       ingredientPrice: '' 
      }]; 

簡單的變化在你的HTML

<body ng-controller="MainCtrl"> 
    Want to add Ingredients : 
    <button ng-click="showIngredientForm = !showIngredientForm" ng-class="{'red' : showIngredientForm}">{{toggleText}}</button> 
    <div ng-show="showIngredientForm"> 
     <div ng-repeat="formToAdd in formsToAdd track by formToAdd.ingredientId"> 
      <ng-form name="productFieldForm"> 
       <div class="form-group"> 
        <label>Option Type</label> 
        <select name="ingredientName" ng-model="formToAdd.ingredientId" class="form-control"> 
         <option value="">Select Option Type Name</option> 
         <option ng-repeat="option in ingredientTypeList" value="{{option._id}}">{{option.ingredientTypeName}}</option> 
        </select> 
        <button ng-click="removeForm(formToAdd)" ng-if="formsToAdd.length > 1">Remove</button> 
        <!-- <div class="validation_messages"> 
         <span ng-show="validCityingredientTypeName">ingredientType Name is required</span> 
        </div> --> 
       </div> 
      </ng-form> 
      <div ng-if="formToAdd.ingredientId"> 
       <div ng-repeat="itemToAdd in itemsToAdd track by $index"> 
        <div class="form-group"> 
         <ng-form name="userFieldForm"> 
          <table> 
           <tr> 
           <td> 
            <label>Option Name</label> 
            <input type="text" placeholder="Option Name" name="ingredientName" ng-model="itemToAdd.ingredientName[formToAdd.ingredientId]" ng-pattern="/^[a-zA-Z ]{3,25}$/" class="form-control" autocomplete="off" ng-required="true" ng-change="verifyDuplicate()" /> 
            <div class="validation_messages" ng-show="userFieldForm.$submitted || userFieldForm.ingredientName[formToAdd.ingredientId].$touched"> 
             <span ng-show="userFieldForm.ingredientName[formToAdd.ingredientId].$error.required">Option cannot be empty</span> 
             <span ng-show="!userFieldForm.ingredientName[formToAdd.ingredientId].$error.required && userFieldForm.ingredientName[formToAdd.ingredientId].$error.pattern && userFieldForm.ingredientName[formToAdd.ingredientId].$dirty">Option Name Samples Cookie,Saz Mora</span> 
            </div> 
            <div class='validation_messages' ng-if='itemToAdd.isDuplicate'> 
             <span>Duplicate Not Allowed</span> 
            </div> 
           </td> 
           <td> 
            <button ng-click="remove(itemToAdd)" ng-if="itemsToAdd.length > 1">Remove</button> 
           </td> 
           </tr> 
          </table> 
         </ng-form> 
        </div> 
       </div> 
       <div> 
        <button class="validation_messages" ng-click="addNew()">Add new</button> 
       </div> 
      </div> 
     </div> 
     <div> 
      <button class="validation_messages" ng-click="addForm()">Add new Form</button> 
     </div> 
    </div> 
    </body> 

這裏是更新code

UPDATE

要在以另一種形式加入新的點擊刪除多餘的boxex每添加以下代碼JS

$scope.addNew = function(key) { 
      if ($scope.itemsToAdd[key]== null) { 
       $scope.itemsToAdd[key] = []; 
      } 
      $scope.itemsToAdd[key].push({ 
       ingredientName: {}, 
       ingredientPrice: '' 
      }); 
     }; 
    $scope.remove = function(itemToAdd,key) { 
     var index = $scope.itemsToAdd[key].indexOf(itemToAdd); 
     $scope.itemsToAdd[key].splice(index, 1); 
    }; 

在HTML中的內ng-repeat到itemsToAdd

<div ng-repeat="itemToAdd in itemsToAdd[formToAdd.ingredientId] track by $index"> 

而不是一個清單，我們基本上是創建itemsToAdd對象{}和分配一個關鍵與一個列表對象，它爲每個和每個表單單獨保存新項目。