javascript - 使用 ng-repeat 动态插入多个表单，每个表单都有动态文本框来获取值

Question

我正在使用 ng-form 和 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>

该 html 的 Angular Controller 代码如下:

$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 相关的唯一键，并将输入文本值分配给该键，这将避免在下一个表单字段中重复出现相同的值。

添加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

更新

要在另一种表单中单击“添加新”时删除每个额外的 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 对象 {} 并为其分配一个带有列表对象的键，该列表对象分别为每个表单保存新项目。