如何从ng-repeat中删除特定元素?

时间:2016-09-07 18:46:39

标签: javascript angularjs arrays forms ng-repeat

我在表格中使用ng-repeat时遇到了一些麻烦。

我有表格,当我点击一个按钮时,会出现一组输入字段和一个删除按钮。我正在使用ng-repeat。我希望能够在单击“删除”按钮时删除该特定输入组。我现在写的方式,但是,点击删除按钮会删除列表底部的输入,无论我在哪里点击。这是一个GIF,可以更好地解释它:

enter image description here

我认为这只是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);
};

提前感谢您的帮助!

1 个答案:

答案 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