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绑定到控制器中的数组，该数组通过函数进行迭代：

$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模型。我可能可以用Jquery做到这一点，但是那样很快就会变得非常混乱和可怕。

我承认我的方法也不是最好的方法，因为这是我第五次尝试完善方法：）

有人对如何做到这一点有任何想法吗？

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模型。您可以通过将新项目推送到acctCodeSegments数组中来轻松添加新行。

使用自己的ng模型动态添加输入

1 个答案: