使用自己的 ng-models 动态添加输入

Question

我需要用户能够向表单添加新的帐户代码，并且能够在将表单发送到服务器之前更改每个单独的代码。我的标记如下所示：

<div id="acodes-wrapper">

<md-content id="acctCodeSection{{$index}}" ng-repeat="amt in acctCodeSegments">
<div class="acct-code-container>
  <md-content>

    <md-input-container>
      <label>FF</label>
      <input ng-model="userInputAcctCodes.ff" class="aCodesInputs" maxlength="2" auto-advance />
    </md-input-container>

    <md-input-container>
      <label>XXXX</label>
      <input ng-model="userInputAcctCodes.program" class="aCodesInputs" maxlength="4" auto-advance />
    </md-input-container>

  </md-content>
</div>
</md-content>

</div>

<md-content>
  <md-button ng-click="copyAcctCode()">Add</md-button>
</md-content>

这里的ng-repeat绑定在controller中的数组，通过一个函数迭代：

$scope.acctCodeSegments = [1];
$scope.codeHolder = [];
$scope.userInputAcctCodes = {
  ff: '', program: ''
};

//'Add button functionality'
$scope.copyAcctCode = function(){

  //Add new acct code segment to markup
  let addIndex = $scope.acctCodeSegments.slice(-1)[0]+1;
  $scope.acctCodeSegments.push(addIndex);

  let acData = $scope.userInputAcctCodes;

  //Push current model values to holding array
  $scope.codeHolder.push({ 
    ff: acData.ff, type: acData.program
  };

  //Wipe original model
  $scope.userInputAcctCodes = {
     ff: '', program: ''
  };
};

我努力想出的是一种使原始标记使用推送到 codeHolder 数组的模型数据的好方法，而新标记使用原始数据模型。基本上我需要一种方法来改变每个输入标签中的 ng-models。我可能可以用 Jquery 做到这一点，但那会很快变得非常混乱和可怕。

我承认我在这里的方法可能也不是最好的方法，因为这是我第 5 次尝试改进它的完成方式:)

有没有人知道如何实现这个？

Answer 1

如果您使用以下内容更改输入的 ng-model

<md-content id="acctCodeSection{{$index}}" ng-repeat="amt in acctCodeSegments">
<div class="acct-code-container>
  <md-content>
    <md-input-container>
      <label>FF</label>
      <input ng-model="amt.ff" class="aCodesInputs" maxlength="2" auto-advance />
    </md-input-container>
    <md-input-container>
      <label>XXXX</label>
      <input ng-model="amt.program" class="aCodesInputs" maxlength="4" auto-advance />
    </md-input-container>
  </md-content>
</div>
</md-content>

它将使您能够更改每个输入标签中的 ng-models。您可以通过将新项目推送到 acctCodeSegments 数组来轻松添加新行。

使用自己的 ng-models 动态添加输入

Dynamically add inputs with their own ng-models

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-model

angularjs-material