I'm encountering a challenge with an ng-repeat within a form.
Within my form, I have implemented a button that triggers the appearance of a set of input fields along with a remove button using ng-repeat. My objective is to allow the removal of a specific group of inputs upon clicking the designated remove button. However, as it stands, when I click the remove button, it removes the inputs from the bottom of the list regardless of where I click on the form. For clarification, refer to this GIF:
https://i.sstatic.net/qKfzY.gif
Initially, I assumed that a simple splice at the specific $index within the ng-repeat would suffice, but evidently there may be something crucial that I am overlooking.
Below is the HTML code for the ng-repeat section:
<div class="form-group">
<label class="col-sm-2 control-label">More Parameters</label>
<button type="button" ng-click="addParameterFields()">Add Parameter</button>
<div class="col-sm-10 col-sm-offset-2">
<div ng-repeat="params in formData.gameIdParams track by $index" class="controls parameters">
<input type="text" ng-model="formData.gameIdParams.id[$index]"
name="gameIdParamsId"
class="col-sm-3"
autocomplete="off"
placeholder="Type of Input"
validation-field-required="true"/>
<input type="text" ng-model="formData.gameIdParams.label[$index]"
name="gameIdLabel"
class="col-sm-3"
autocomplete="off"
placeholder="Placeholder Text to add in Input Field"
validation-field-required="true"/>
<input type="text" ng-model="formData.gameIdParams.validationRegex[$index]"
name="gameIdvalidationRegex"
class="col-sm-3"
autocomplete="off"
placeholder="Regex used for Validation (optional)"
validation-field-required="false"/>
<button ng-click="formData.gameIdParams.splice($index,1)">Remove</button>
</div>
</div>
</div>
Furthermore, here is the logic employed for adding the forms:
$scope.addParameterFields = function() {
console.log('CLICKED');
if($scope.formData.gameIdParams === null || $scope.formData.gameIdParams === undefined) {
$scope.formData.gameIdParams = [];
}
$scope.formData.gameIdParams.push({
id: "",
label: "",
validationRegex: ""
});
console.log($scope.formData);
};
Thank you in advance for any assistance!