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的角度控制器代码如下：

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

添加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，请点击另一个表单中的new new，在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);
    };

内部ng-repeat到itemsToAdd

的HTML

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

我们基本上创建itemsToAdd对象{}而不是列表，并为其分配一个列表对象的键，该列表对象为每个表单单独保存新项目。

带有ng-repeat的动态多表单插入，每个表单都有动态文本框以获取值

1 个答案: