我在表格中使用ng-repeat时遇到了一些麻烦。
我有表格,当我点击一个按钮时,会出现一组输入字段和一个删除按钮。我正在使用ng-repeat。我希望能够在单击“删除”按钮时删除该特定输入组。我现在写的方式,但是,点击删除按钮会删除列表底部的输入,无论我在哪里点击。这是一个GIF,可以更好地解释它:
我认为这只是ng-repeat中特定$ index的一个简单拼接,但显然不是(除非有我遗漏的东西)。
以下是ng-repeat的HTML:
<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>
以下是我用于添加表单的逻辑:
$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);
};
提前感谢您的帮助!
答案 0 :(得分:1)
您应该创建一个类似的函数:
ng-click="removeForm($index)"
$ index对应于ng-repeat循环的迭代次数。
然后,在您的控制器中,只需:
$scope.removeForm = function(index){
delete yourObj[index];
// or
yourObj.splice(index, 1);
}
编辑
替换:
formData.gameIdParams.your_variable[$index]
通过:
formData.gameIdParams[$index].your_variable
或者:
params.your_variable